News for hackers. Stuff that matters.
Re:Stripe Checkout by benjamindc on Wednesday March 05, 2014 @05:09PM (#7350306)
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 :)
Re:Stripe Checkout by davidwparker on Wednesday March 05, 2014 @05:15PM (#7350330)
If the code is modular enough, would you mind open sourcing it (or blogging about how you developed it)?
Re:Stripe Checkout by benjamindc on Wednesday March 05, 2014 @05:38PM (#7350454)
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.
Re:Stripe Checkout by cmapes on Wednesday March 05, 2014 @05:56PM (#7350578)
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.
Re:Stripe Checkout by benjamindc on Wednesday March 05, 2014 @06:27PM (#7350734)
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.
Re:Stripe Checkout by mikeg8 on Wednesday March 05, 2014 @08:57PM (#7351363)
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.
Re:Stripe Checkout by Flenser on Thursday March 06, 2014 @08:00AM (#7353369)
I wanted to read more of the screens, a way to pause it would have been nice.
Re:Stripe Checkout by mattmanser on Thursday March 06, 2014 @04:33AM (#7352752)
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.

Re:Stripe Checkout by skilbjo on Wednesday March 05, 2014 @06:22PM (#7350713)
I did that as well! Beautiful stuff, good on the developer.
Re:Stripe Checkout by oulipo on Wednesday March 05, 2014 @06:57PM (#7350864)
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...
Re:Stripe Checkout by amitamb on Thursday March 06, 2014 @05:08AM (#7352862)
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.

Re:Stripe Checkout by novaleaf on Wednesday March 05, 2014 @07:36PM (#7351037)
honestly, they should opensource the checkout.js code, not just the demo
Re:Stripe Checkout by filipedeschamps on Thursday March 06, 2014 @06:42AM (#7353124)
Best HTML5 animation ever. Really good job guys, completely immersive.