Hacker News Reader

Comment by benjamindc | Hacker News Reader

The canvas element is only used on Chrome as it has a hard time rendering animations above a big CSS radial-gradient. The whole animation is just using DOM elements, CSS transitions/animations and requestAnimationFrame. And yes, entirely handmade :)

View on HN

If the code is modular enough, would you mind open sourcing it (or blogging about how you developed it)?

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.

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.

I wrote a post about doing animations using Sketch and d3.js, you might find it interesting http://snips.net/blog/posts/2014/01-10-fast-interactive_prot...

honestly, they should opensource the checkout.js code, not just the demo

Probably not exactly similar to what Stripe did but I recently released a tool for creating demos http://www.castbin.com/

Would like to get feedback on what you really liked about Stripe experience and how to improve Castbin.

Best HTML5 animation ever. Really good job guys, completely immersive.

Reply on news.ycombinator.com