Quick tip: Native Webflow SVG path animation using CSS variables

Usually when we want to create SVG path animations in @Webflow we need to use things like Lottie or other tricks to make it work.

However, now that Webflow has CSS variables support - which includes Interactions - there's a cool trick you can use to create it 100% with Webflow.

[jeremyleroux]

thanks for this Diego used the same approach for a scroll into view css path animation.

[SuperChaosTTV]

How would you go about making this responsive on smaller breakpoints?

[ProGaming-gfpr]

That's an amazing trick! Thank you! Quick question: what if I have more than one path animations with different lenghts of stroke-dasharray? How to animate all of them using this method?

[poukjty]

Hey Man this is great! But can you elaborate a little more on this.

[peterpaul]

looks fantastic. I have a little svg car that I want to drive on scroll over an svg map. I have no clue how to start. I think it is related to path drawing. Could you give me any hint? Am I on the right way with your animation video here or is it a complete different topic?

[yadav-r]

Hi, new to this, does doing this way has significant performance boost WRT lottie animations