Hacker News Reader

Comment by toddmorey | Hacker News Reader

The demo of checkout available at https://stripe.com/checkout uses a canvas element for the demo animation. It's a really well done walkthrough. Was it entirely custom-coded or done using a framework / tool to help?

View on HN

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

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.

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.

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

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 did that as well! Beautiful stuff, good on the developer.

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

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.

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

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

It looks like the canvas is only there to render the background gradient. Pretty sure all the animation is done via CSS3.

Is it? I don't see any canvas. Would be interested as well...

Reply on news.ycombinator.com