This week we're ramping up to the end of the year with some amazing math-based mouse pointer effects, and a whole load of great inspiration!

Planning any new year resolutions? Hit reply and let me know!

♥️

Donovan at CSSAnimation.rocks

Articles

Interactive Repulsion Effect with Three.js — tympanus.net

This is an amazing example of how UI can be coded to respond to mouse position. The example uses Three.js but you could apply the logic to other forms of animation too!

8 Best Animated Websites with CSS & HTML Animation to Inspire You

Some nice examples of homepage animation to check out

Featured

Level Up your CSS animation skills | CSS Animation — courses.cssanimation.rocks

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.

Inspiration

Spotify Wrapped Animation using GSAP — codepen.io

A rebuild of the amazing Spotify Wrapped 3D text, created using DOM elements and GSAP! Check out the code to see how it's done

Planet #00003 — codepen.io

I do love a space animation! This planetary info card has the nicest moon animation I've seen yet 🌍🌒

Christmas Pudding Slider — codepen.io

The indefatigable Chris Gannon returns with a cute Christmas-pudding themed slider. Delicious!

Moiré Pattern with CSS Gradients: checkerboard and circle — codepen.io

See how too static images, when rotated can create some trippy visual effects!

Yeet! — codepen.io

Lovely subtle shadow effect on this bouncy logo

Solid Shifter — codepen.io

A great little 3D effect where the shapes twist to change - drag to change perspective!

Pintalia Academy — codepen.io

A gorgeous example of SVG animation in these animating logos

Links/Buttons Animations

A neat little example of text hover effects

Animation in the real world

Your 2018 Wrapped — spotifywrapped.com

Each year Spotify wows us with their roundup and this one is no exception. The focus is all about the gorgeous text effects! Check it out