Animate a 'travel route' .svg line reveal while scrolling down

Design help Animations & Interactions
1

Hi guys,

I have an svg background (a map) and then a second svg over the top that is just a squiggly line down the page (a travel route). The placement of them is fine.

Question 1 - I’m not sure the best way to reveal the travel route (svg path) as I scroll. Any thoughts?

Question 2 - Alternately I could have multiple lines between ‘stops’ on the path (4 of them) that just animate on when they are revealed. ie. so they don’t need to keep up with the scroll necessarily. How can I trigger the css animation for each svg path within webflow?

2

Hey @jnapier84, Welcome :webflow_heart:

Something like this?

3

@avivtech Yes!! That is exactly what I’m after haha! Any thoughts how?

EDIT - I just saw that it’s a ‘wipe’ effect, ie. the path cant move very far sideways, only down, because the mask moves straight down.
I think I’d still like to know how this is done, but ideally it would be actually along the SVG path itself.

I have a path animating down using Vivus but am unsure how to trigger it. Or make it move with the page scroll.

4
5
6

This is great thanks Avivtech - one more questions sorry:

The second link seems to be doing the trick, except I can’t seem to show up the ‘dotted’/dashed path (like a treasure map in your original link).

See here for codepen: https://codepen.io/anon/pen/RXLLEm

It appears to achieve the effect by pretending the entire path is one dashed line segment, meaning I can’t have dashed lines within that.

Would you have any thoughts on if that’s possible? (Same effect but with a dotted line)

I almost wonder if there’s a way to use the functioning line-wipe to somehow mask a dashed SVG lying underneath?

7

These are 2 different methods:

The Webflow example does not use any code or lines, it is 2 backgrounds overlaying each other, when the top one have some “holes” in it.

The one in the codepen is JS driven, and the dash array is defined with JS. So if you want to change that, you have to manipulate the JS code.

8

Hello, just come across your Ornella website. I’m quite new to webflow, how do I make a line expand horizontally on page load like you have under your heading? Thanks

1 Like
9

Hi @flem1985

You can do this with Interactions!