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 šŸ”„