This week we're learning about clipping, creating water effects, and exploring a load of cool inspiring demos!

♥️ Donovan at CSSAnimation.rocks

Articles

Creating a Water-like Distortion Effect with Three.js — tympanus.net

Have some fun creating water-like distortion effects in this tutorial from Codrops

Clipping, Clipping, and More Clipping! — css-tricks.com

An in-depth guide to using clip-path for interesting hover and transition effects

Featured

Inspiration

Codepen Challenge: Orange & Blue

Orange is the New Blue 🧡💙

Orange Blueberry Checkbox

Continuing the blue/orange theme, this checkbox has a lovely snappy animation

Orange & Blue

Finishing up the orange and blue examples this week, an awesome example of 3D cubes! Drag it around to change the colours too

Simple Windmill Using CSS

A relaxing CSS-powered windmill 🌬

Obnoxious Burger

Click this burger menu to see it transform beautifully into a close icon... 😅

80s Fonts Text Effect 4: Cyberspace Text

Awesome SVG text effect here but I also really like how Sass is used to generate the animated stars! 💫

Staggerred Wave Loading

I'm always a sucker for staggered animations. Another simple little loader effect

Conc circles

Fun concept here showing how concentric circles can create interesting shapes

3d-hover-effect

This CSS animated 3D hover effect uses shading and nice transitions to create a lovely result

Animation in the real world

Notre Histoire – LAFAURIE

Classy transitions, parallax and text treatment makes this site stand out