This week we have some amazing pure CSS animations, Framer Motion tips, as well as some really impressive GSAP work, including scroll triggers and smooth blurry animation examples.

♥️ Donovan at CSSAnimation.rocks

Articles

How to use the GSAP ScrollTrigger plugin in React — edidiongasikpo.com

A step by step guide to animated "scrollytelling" using GSAP and React

Re-Creating the Porky Pig Animation from Looney Tunes in CSS — css-tricks.com

How to use some clever 3D transforms to re-create the classic Porky Pig pop-in

Working with Framer Motion — css-tricks.com

Matt Perry from Framer and I take a look at the React animation library Framer Motion

Featured

Animation made easy — greensock.com

If you're working with UI and want to make it shine, try adding some GSAP to the mix.

You can simulate hand-drawn SVGs, morph between shapes or element positions, smoothly transition large numbers of elements and more with just a few lines of code.

Check out the 2020 showreel too for inspiration!

Inspiration

Netflix Intro Animation Pure CSS

This is some quality CSS-only animated work, showing the current Netflix intro animation

Plus Sign Swirl + Anime.js

The GSAP bendy-blurring effect on this swirly + symbol is really slick

Card Hover interactions

Multiple animations with lovely timing functions combine to make these hovers super-smooth. Quality work!

Hypnotic Loader

There's something of a Portal-esque feel to this lovely little loader animation. I love the rotation!

20.

Rainbow Road meets EQ visualisation in this amazing ThreeJS demo. So smooth!