The animating in React article touches on my favorite first step to building any animation from a prototype, no matter what tech you’re using: watching it in slow motion.
You can do this with Quicktime, gif scrubber, or even your browser dev tools depending on what the source of the prototype is. Having that step-by-step view of what actions happen in the animation makes building it accurately so much easier.
Most UI animations we build happen in just a few short milliseconds, but a whole lot can happen in those tiny blocks of time! Getting all the pieces in the right order at the right time makes a big difference in the quality of the end animation.
Until next week,
p.s. Replies go straight to my email and I read them all. I’d love to hear about what you’re working on.