Animating PNGs or Complex Vectors
(like the border)
Use this if: If you have a PNG or SVG with 10k+ characters and you want to animate a mask inside it.
<div> with line-wrapper class
CSSĀ targeting line-wrapper class
Copy, edit and hide this code block
How to use:
1
If your PNG is coloured, copy it into Figma and use image-tracer to extract the SVG.
2
Change the color of the SVG to black.
3
Export the image as an SVG or PNG.
4
Upload the image to Webflow and copy the link to where it's stored.
5
Copy the above lines-wrapper and code into your project.
6
Open code-lines and change the class to the class you wish to apply the effect to and the 'mask' and '-webkit-mask' URLs to your image URL.
7
Add your gradient and set mask size (contain, cover, etc...)
8
Make any adjustments to the animation.
9
Enjoy a beautiful animated gradient on your PNG or complex vector š„