Dec 14, 2020

CSS Animation Weekly #229

By CSSAnimation.rocks • Issue #229 • View online

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

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

thecybermonkeys.com • Share

Loading animations in vanilla CSS

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

akhilgautam.medium.com • Share

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.

ashleemboyer.com • Share

Featured

Free Zombie Themed CSS Animation Cheat Sheet

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.

undead.institute • Share

Inspiration

Christmas Cannon

Best way to decorate a room ever

codepen.io • Share

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

codepen.io • Share

3D Pokedex

Click to open this beautifully designed Pokedex

codepen.io • Share

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

codepen.io • Share

Neumorphism animation

Subtle use of shadow makes this button / container stand out

codepen.io • Share

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

Did you enjoy this issue?

By CSSAnimation.rocks

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.