Signature reveal in Webflow

Design help Animations & Interactions
1

Hello!

I would like to have a hand written signature effect on my Webflow site.
So, what I have now is a an overlay div which is the same color of the background and that works quite okay. Div slides from left to right and it reveals the signature beneath.
But, I would like to change the background into an image, and because background won’t be uniform anymore, the overlay will not work.
How can i achieve a simple reveal effect from left to right, something that will look like live hand written signature?

Thank you.

Here is my public share link: LINK
(how to access public share link)

2

If you want a nocode solution check out svgator.com which you can use to create SVG animations in a web based application.

You could explore using GSAP animation library and their DrawSVG (membership required) plugin. I have used this and it works great. You are basically animating SVG strokes on a timeline.

Here is an example.

GSAP - Love Stroke Animation - (codepen.io)

Here is another way to do it without any plugins or tools.
Sign on the Dotted Line: Animating Your Own SVG Signature (tutsplus.com)

Have fun!

3

Thank you I’ll try that! :slight_smile: