Show HN: Impulse – Dynamic JS Animations for the Mobile Web | Hacker News Reader

Show HN: Impulse – Dynamic JS Animations for the Mobile Web

impulse.luster.io

93 pointscoderzach31 comments

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/)

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

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.

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.

Very nice and performant. What's the secret?

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.

Great work! Everything looks really smooth on Chrome on Android. Is there a list of targeted mobile browsers on the site or at github? I could not find it.

That's a great idea, and super important. I'm going to start working on that right now.

Right now it's iOS and Android, and works on most versions I've been able to test on. 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.

Windows phone: sort-of...ish:

The home page title I can flick around, and it reacts to velocity and direction, but if I try and drag it, it lets go before I get very far and goes back to its default state.

Similarly the pull-down menu on the home page - I can pull it down, but it goes at its own speed - I can't drag it or give it velocity.

On the demos page - I can't scroll the page, so can only get to chat heads. This one, like the home page title, I can flick around with velocity and direction, but can't keep hold of it. And the background image moves too.

Windows Phone 8.0.10328.78, Nokia Lumia 520 (480x800)

(PS. In iOS, personally I'd find it easier if the demos opened in the same page so the back button works.)

Thanks for the heads up, wrt windows phone, it's definitely high on my list to get windows phone support. The reason I open the demos in a new page is that it prevents interactions from triggering the back-swipe gesture in iOS 7 safari.

> 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.

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

Do you think the benefits would hold true for animating SVG elements?

Yeah, they totally do.

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

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

we prototyped our app using html5 & jquery pep - http://pep.briangonzalez.org (among other things) and were surprised and how well it worked on tablets. so for now we're planning to use cordova/phonegap rather than going full native =)

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

Thanks, I updated it to make it more clear!

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.

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.

I'm currently running 4.4.2 on a Verizon LG G2. I'm using the "HN - Hacker News Reader" app by Manuel Maly. Hope that helps.

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.

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

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.

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

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.

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

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

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

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.

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.

Reply on news.ycombinator.com