Diamond wipe animation for revealing text

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?

Put on your shades before you run the demo below! 😎

I went loud with the colours! 🔆🔊

See the Pen Diamond swipe by Rob (@robjoeol) on CodePen.

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!

Homer saying 'Beautiful. Star wipe and we're out'