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'

Tagged