Copy
The UI Animation Newsletter
vol 18.26 • July 13, 2018 • Twitter / Subscribe / Archives 

Happy Friday! The learning section is particularly strong in this week’s issue. We’ve got articles that dig into the CSS vs JavaScript question, and making complex animations in React. (I cover the first question extensively in my Choose your animation adventure talk too.)

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,

- Val

p.s. Replies go straight to my email and I read them all. I’d love to hear about what you’re working on.

 

UI ANIMATION OF THE WEEK
wobbly and floaty work caoursel

Supremo agency site

Trembly SVGs and floaty images make this agency work carousel unique. The visual persistence of elements on the page transitions is a nice touch too. That really helps to tie the page transitions together.

INSPIRATION

Google CSS Loaders
A few alternate takes on the Google loader, all done with CSS. There are so many motion possibilities even with the simple shapes and small colour palette.

workspace animation

Workspace animation
An animated desktop scene by Yiting Liu all drawn and animated in CSS. I wish my desk looked this neat.

tasty loader

Bacon loader
Need a loader for your breakfast? How about this wavy bacon loader like this fun one from Chris Gannon? It’s made with SVG and GSAP.

Zippity zappity
Bright colours, fun made up words, and dynamically drawn SVGs! What's not to like in this mouse chaser from Steve Gardner?

LEARNING

Building a complex UI animation in React, simply
Simple might not be a word you’d usually use to describe a React project, but Alex Holachek does a good job walking you through how to build complex UI animations using React, styled-components, and react-flip-toolkit. Even if you never plan on working with React, the part on breaking down the animation covers a solid way to start when building any UI animation.

 

The beauty of Mathematics - linear transforms
Both a nice bit of animation and a nice visual way to see how matrix transforms work. Both of which are probably interesting to you if you animate with CSS!

 

Uncomfortable development (talk)
A video of Stephen Shaw’s talk from CodePen Huston where he walks through some of the animation techniques he used for an animation-heavy micro site. Lots of interesting tidbits in this one!

 

Animations and more: CSS vs JavaScript
Another take on the ”Should I use CSS or JavaScript for my animation?” question. This particular take is very pro-CSS but Hugo makes some good points.

UPCOMING EVENTS:

I’ll be at these conferences in the next few months. If you’re at one of them too, come say hi! 

Smashing web animation webinar
July 24, 2018


Animation in Design Systems workshop
UX Week, August 22, 2018

AEA Chicago
Aug 27 - 29, 2018

 

Support the UI Animation Newsletter: 
Submit a link for a future issue  or  Share it with a friend

Copyright © 2018


You can update your preferences or unsubscribe from this list here.