CSS Animation Weekly #71 - FLIP technique, tweaking animation performance

By CSS Animation Weekly • Issue #71 • View online

It’s December already!? Where did the year go :)

This week we’re learning how to animate layouts using the FLIP technique, as well as learning how Firefox helps us tweak animation performance, and loads of inspiring animation examples to keep us… inspired!

♥️

Donovan at CSSAnimation.rocks

Articles

Animating Layouts with the FLIP Technique

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this - as Nick Babich sai

css-tricks.com • Share

Optimizing CSS: Tweaking Animation Performance with DevTools

Maria Antonietta Perna explores the Performance Tool available in the Firefox browser to find out more about CSS animation performance.

www.sitepoint.com • Share

Featured

One more chance to get a bargain

Several people were upset that they missed last week’s big sale! And quite right too, it’s not often you get to pick up a 4+ hour video tutorial course for a bargain.

Well, kind readers, for opening this email here’s another chance to save. For one week only you can get the course for just $19. I’ll look forward to meeting you in the course’s Slack group!

courses.cssanimation.rocks • Share

Inspirationgetfly

Animated Login and Sign up

Very click transition between sign up and log in states!

codepen.io • Share

Vector Trophy SVG Animation | SVG + GreenSock

Delicious bit of SVG animation on this “3d” style trophy

codepen.io • Share

Photo Gallery Parallax Scroll

Some awesome work from a “Level Up” student! Check out this mobile photo scroll effect 📸

codepen.io • Share

Different transition speed on hover out

Sometimes simple things can be really useful - like knowing how to create a different transition on mouse over and an mouse out. This demo illustrates it nicely.

codepen.io • Share