how to make this text erasing effect
hi
i want to re build this website
"https://www.agilebydesign.com/"
but not sure how to make text erasing effect in "S" style,
it is there thought out the website
4 Replies
hey @kaif_suthar - this is a Diego original, he uses a lot of lottie which it looks like is going on here too. Basically he builds the animations in Adobe After effects then exports to lottie and controls with Webflow IX
here you can see the h1 and a lottie animation as a sibling inside the parent with class .eraser-masked-wrapper
I'm not an Adobe after effects master but the gist of this style of animation is to overlay your content with a white stroke and then "erase" that stroke by animating it away
it's basically the reverse of a "handwriting text" animation https://www.motiontricks.com/animated-handwriting-effect-part-2/
Craig Roblewsky
Motion Tricks
Animated handwriting effect (part 2) • Motion Tricks
This is part 2 of the handwriting lesson. Now that you have some paths, you'll learn how to create animated writing with DrawSVG from GreenSock.