UI Animation Newsletter 19.07 - Animation in React ✨ Grid reveal effect with anime.js 🚀 Motion design physics 🔬

vol 19.07 • Feb 15, 2019 • Twitter / Subscribe / Archives

Happy Friday! This week’s issue has some inspiration for UI animation and traditional animation alike. There are also some deep dives into animating in React, physics for motion design, and using one of the latest anime.js features. Fridays are my favourite day for animation things. 😀

Until next week,

- Val

p.s. Replies go straight to my email, and I read them all. Tell me about what you’re planning to learn in 2019.

UI ANIMATION OF THE WEEK

The Shift #dzy

There’s lots of whitespace paired with interesting layering and masking animations on this site. Oh, and a custom cursor too, of course.

INSPIRATION

Valentine’s Day animation
Yeah, I know that it was yesterday, but these heart characters from Bee Grandinetti are just too fun not to share.

Love box
A cute assembly line SVG animation from Chris Gannon. (Same holiday disclaimer from above applies.)

Solar system 3d animations (CSS)
An impressive visualization of orbits done all in CSS by Fabricius Seifert.

Tab bar animation
A neat tab bar animation concept by Lukáš Straňák.

LEARNING

Animation in React
A very helpful read from Donovan Hutchinson for anyone wanting to make UI animation in React easier.

Grid reveal effect with anime.js
Some dramatic full-screen transitions using the new stagger feature of anime.js from the folks at Codrops.

How I started motion design with high-school physics
A breakdown of how physics (or the concept of physics) plays into the decisions you make around what to animate, how and when. The focus is on working in After Effects but these tips can apply to animation done with any tool.

Liquify your SVGs
A fun look at what you can do with GSAP and SVG filters from Peter Barr.

Directional aware hovers
Big bright hovers that change direction based on your mouse movement.

UPCOMING EVENTS:

I’ll be at these events in the next few months. If you’re there too, come say hi!

An Event Apart Seattle
March 4-6, 2019

From Business to Buttons
Stockholm, May 3, 2019

An Event Apart Boston
May 6-8, 2019

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