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

Optimizing CSS: Tweaking Animation Performance with DevTools — www.sitepoint.com

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

Featured

One more chance to get a bargain — courses.cssanimation.rocks

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!

Inspirationgetfly

Animated Login and Sign up — codepen.io

Very click transition between sign up and log in states!

Vector Trophy SVG Animation | SVG + GreenSock — codepen.io

Delicious bit of SVG animation on this "3d" style trophy

Photo Gallery Parallax Scroll — codepen.io

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

Different transition speed on hover out — codepen.io

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.

E-Commerce Store is closed — codepen.io

This "Closed" sign makes good use of simple CSS animations

CSS Buttons | Depth Effect — codepen.io

Select the blurry button to see an awesome transition. Cool idea!

☑️ CSS-only Todo List Checkbox Animation — codepen.io

Super-slick example of a checkbox animation ✅

Resume svg scroll animation — codepen.io

Lovely illustration and animations on scroll on this portfolio example page!