CSS Animation Weekly #340

Blobby shaders, 3D grids and a FREE lesson from my course!

This week we explore some awesome shaders, learn how to create a reflective grid with Three.js, and learn about Motion Canvas.

Plus, as a special reward to you, check out an exclusive, free lesson from my course, Level Up Your CSS Animation Skills at the end of this message!

❤️ Donovan at CSSAnimation.rocks

The Gooey Effects With Shader

A tutorial on creating this shader effect that looks like a 3D render!

Recreating Crosswire’s Reflective Grid with Three.js

Learn how to recreate the reflective grid and energy wave from Crosswire's website using Three.js.

Motion Canvas is now Open Source! Check out a walkthrough of how you can use Motion Canvas to create complex and engaging animations using code.

And now a word from...

Level Up Your CSS Animation Skills

A practical guide to creating amazing CSS animation on the web. Read on to discover a free lesson in this issue!

Inspiration

Animated Number Counter on Scroll with Vanilla Javascript

See how sets of numbers can be animated with this useful scroll-triggered JS effect

forest

This is wild - a forest full of trees, atmospheric lighting effects and real-time shadows. Use arrow keys to move and explore!

Jobs!

Have a look at some great roles in web engineering at Toast!

Senior IOS Engineer

Remote

Staff Software Engineer

Remote

Staff Software Engineer

Dublin, Ireland

Systems Engineer

Bengaluru, India

Find loads more roles in Dublin, Boston, Toronto, Bangalore and even fully remote!

BONUS: Level Up Your CSS Animation Skills

In this lesson we build some fancy animated tooltips that pop up over links on hover. You’ll learn how to style and animated tooltips, and how to use some simple JavaScript to make it easy to set the tooltip content.

I loved making this lesson, and I hope you find it useful.

If you liked this and want to see more, my entire 4-hour course is available on Udemy. Save over 90% by using this special link.

That’s all for this week! See you next Monday!