DEV Community

Cover image for Diamond wipe animation for revealing text
Rob OLeary
Rob OLeary

Posted on • Edited on • Originally published at roboleary.net

Diamond wipe animation for revealing text

I was riffing on some ideas for revealing text in interesting ways.

Using shapes can be cool.

How about a diamond?

I went loud with the colours! 🔆🔊😎

The idea is to animate a clip path to reveal the text. I wanted the text reveal to happen within a bordered shape. To do this you need to have a shape for the clip path, and a separate element with the border that has the same shape. This is easier to do in SVG as you can work directly with a path element.

What do you think?

There are other wipes besides diamond wipes...

But, why eat hamburger when you can have steak!

Top comments (1)

Collapse
 
robole profile image
Rob OLeary

jhomer saying "and beautiful star wipe and we're out