This week we are creating audio visualisers, learning how to build our own animated loaders, adding accessible scroll-to-top buttons and loads more!

♥️ Donovan at CSSAnimation.rocks

Articles

Audio Visualizer — thecybermonkeys.com

How to build your very own audio visualizer using HTML, CSS and JavaScript

Loading animations in vanilla CSS — akhilgautam.medium.com

Loaders! We love them. Here, Akhil Gautam walks us through how to create our very own ring and bar animated loaders

Accessible, Smooth Scroll-to-top Buttons with Little Code

Adding a scroll to top button with smooth scrolling is as easy as adding a few lines of code.

Featured

Free Zombie Themed CSS Animation Cheat Sheet — undead.institute

Getting braaains should be fun, so we fill our books, cheat sheets, and newsletters with silliness, zombies, and a whole lot of web development learning. Sign up for our list and get a CSS animation cheat sheet free.

Inspiration

Christmas Cannon

Best way to decorate a room ever

Glass Card

This glass card uses a neat little trick to create the blur effect! (Hint: it's this bg image) https://assets.codepen.io/721952/bgBlur.jpg

3D Pokedex

Click to open this beautifully designed Pokedex

Astronomical & Tide Calendar 2021

Drag your mouse to see the predicted astronomical positions of the Earth, Sun and Moon over the next year. Very cool

Neumorphism animation

Subtle use of shadow makes this button / container stand out

That's all for now. Remember to grab your free Zombie-themed CSS animation cheat sheet, and we will see you next week!