

Show HN: Impulse – Dynamic JS Animations for the Mobile Web - coderzach
http://impulse.luster.io

======
drhayes9
Very cool! The animations are just buttery smooth.

coderzach, since you're here and responding, how would you compare your
library to Velocity?
([http://julian.com/research/velocity/](http://julian.com/research/velocity/))

EDIT: Ah, should've kept reading. The answer is here:
[http://impulse.luster.io/guides.html](http://impulse.luster.io/guides.html)

~~~
coderzach
I'd just like to add that Velocity is an awesome library and is really well
written. If you need static animations it's a great tool, and you should
definitely use it.

~~~
drhayes9
It seems like such an obvious idea: rather than rely on mathematical guessing
games with easing functions, animate the elements at the velocity of the
user's gesture and apply physics to that.

Having messed around with 2d games this seems really intuitive and exciting.
Nice job and well named.

------
Kiro
Very nice and performant. What's the secret?

~~~
coderzach
Number one is being careful about NEVER triggering a repaint while an
animation is happening. That means only animating css transform properties and
opacity, and deferring anything that updates the contents of an element until
after an animation is finished.

Number two is that, even though it's running a physics simulation for each
animation, we kept the physics code really simple. The simulation code
generally takes less time than the drawing itself.

It also doesn't rely on jquery animate, which has a lot of extra cruft to run
on older browsers and support legacy code. Writing the rendering in pure
javascript helps a ton.

And I think the last thing is that, when the animations respond with the
velocity of your interaction it makes everything feel really smooth.

Even if an animation runs at 60fps, if the way it responds to your touch feels
bad, the animation won't look good.

~~~
tfb
> _It also doesn 't rely on jquery animate, which has a lot of extra cruft to
> run on older browsers and support legacy code. Writing the rendering in pure
> javascript helps a ton._

Quick question for anyone passing by: Do the latest versions of jQuery still
have this issue? I know 2.x dropped legacy support, so it would be interesting
to see how much efficiency with things like animations has increased.

~~~
tothepixel
As far as I've seen Jquery is still using an interval to animation, and not
RequestAnimationFrame. This is because of glitchiness that occurs when you
switch tabs during animations.

[http://bugs.jquery.com/ticket/9381](http://bugs.jquery.com/ticket/9381)

------
thomasfl
This is good shit and further evidence that we'll see more phonegap/cordova
based apps in the future.

~~~
coderzach
Yep, in the near term I think phonegap/cordova are a great way to make cross
platform apps really fast. I've been using Impulse on client projects and most
people don't realize that the app isn't native.

Although, my hope is that the web will progress as a platform to the point
where cordova/phonegap/app store/play store aren't needed. Domenic Denicola
gave a great talk about exactly this topic at EmpireJS this year. And he
explains it much better than I can.

[https://www.youtube.com/watch?v=XzRBgj1AJYA](https://www.youtube.com/watch?v=XzRBgj1AJYA)

------
imkevinxu
First impression once I figured out how to play with the title, very cool! At
first I kept trying to hover over the title or click on it and after going
through the docs and coming back, only then figured out that you have to click
and drag the title around

~~~
coderzach
Thanks, I updated it to make it more clear!

~~~
ds206
FYI, after dragging the title around, then tapping on the menu icon, the menu
is broken. It starts sliding down, but doesn't stop and slides off the page.
If I refresh and don't drag the title, it works as expected. Chrome on
Android.

EDIT: I was mistaken. I'm using an app to view HN and it uses the built-in
browser view to view websites. That's the browser that's broken. Chrome on
Android works great.

~~~
coderzach
Interesting, so it's the android WebFrame that's the issue. Do you know what
version of android you were using?

Android 4.4 uses the same rendering and javascript engine as Chrome for
android, but older versions of Android's WebFrame use a different fork of
webkit.

~~~
jdmichal
For what it's worth, I see the exact same behavior on the desktop in Firefox
31.0. If I pull the menu down a little bit and release, it goes by itself to
the bottom and stops. If I pull it all the way down to the bottom myself, it
just keeps going off the screen. (As in, I don't release the mouse button
until the menu is completely locked to the bottom. Then, when I do release the
button, it starts moving down and off the screen.)

EDIT: Some debugging shows that "from" and "to" are both (0, 416). This is
causing direction in Acceleration.onStart to be (0, 0), which causes
acceleration to also be zero. However, velocity is not zero; it's some
apparently random number. Also, the boundary bottom is set to Infinity,
because it uses (to.y > from.y) instead of (to.y >= from.y), so it never
enters a "bounce" state as it's impossible to go outside the boundary.

TL;DR: I think you need to add tests for when "to" and "from" are the same
location.

~~~
coderzach
Thanks a ton for looking into this, I made an issue at
[https://github.com/luster-io/impulse/issues/5](https://github.com/luster-
io/impulse/issues/5)

------
bestrapperalive
Can't comment on ease of use yet, but these animations are amazingly smooth on
my computer and my phone, even when stacked and applied to a screen full of
elements. Will definitely try this out.

------
jonahx
Nice work, and I like the demo website too. I couldn't find details on browser
support, though....

~~~
coderzach
Yeah I'll be adding a page for that soon.

Right now it's iOS 6+ and Android 4+. It works on windows tablet, but I
haven't been able to get my hands on a windows phone. Also, it works on all
modern desktop browsers, IE 10+, with IE 9 support coming soon.

I'll add a page in the docs for this soon.

------
shaydoc
Very impressive and smooth transitions. Will definitely give this more
attention. Thanks for sharing.

------
sbarre
Just FYI, it's "Boundary".. not sure if "Boundry" is on purpose or not.

~~~
coderzach
Whoops, yeah I'll fix that really soon, and deprecate `Boundry` before it gets
used too often. Thanks for the heads up!

------
ivanceras
Does not work on my iphone 3Gs using safari. Can't scroll, can't pull down the
menu. Trying the inertia scroll, only scrolls the page of the browser, but not
the entire text conversation.

~~~
coderzach
Thanks for the heads up, I don't have consistent access to an iOS 6 device,
but it's on my list of things to buy, along with a windows phone.

