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!
