Hacker News Reader

Comment by benjamindc | Hacker News Reader

The code has been specifically made for that particular animation and, to be fair, it wasn’t even modular enough for my own needs :D Joking aside, I’d love to blog about it and more generally about animations in UIs.

View on HN

You really should do a blog post about it, the first thing I did after admiring the animation was pull open the inspect panel to see how it was done haha. I would love to read more about it.

I did that as well! Beautiful stuff, good on the developer.

So, the technical part isn’t that crazy tbh — as soon as you respect some pretty straightforward principles you should be fine (animate only transform/opacity, favour requestAnimationFrame over setInterval, transitionend/animationend events over setTimeout, …). The complicated part was mostly the “creative” process, ie. how fast should the animation run (some people read, others don’t), what's the appropriate bezier-curve, how make the play button “engaging” enough so people don’t feel like they’re gonna watch a billion-hour screencast, etc.

Fantastic stuff. My first experiences in digital design were from the video side so I used to do keyframe animations in Final cut pro, Apple's Motion, and After Effects. Seeing experiences/animations on par with video using just the DOM is very very exciting for me and can't wait to see your post when you get around to it.

Great job, it's the best HTML5 animation I've seen so far that doesn't stutter like crazy on this (admittedly underpowered) laptop.

And it does a great job at actually communicating exactly what you wanted it to, which is also an uncommon skill.

I wanted to read more of the screens, a way to pause it would have been nice.

Reply on news.ycombinator.com