Continous dashline animation

[Pipo]

Hello,

 

I'm actually learning how to use GSAP so the answer might be quite simple! Here is my situation:

 

• I want to create a background with 3 dash lines that animate continously.
• Even lines have a different stroke-dasharray attribute so they look staggered.
• I want the solution to work even if my container has not a fixed height.

 

The problem with the actual solution is that when my animation repeat I can see a jump to the beginning of the animation. I have tried using the DrawSVG plugin but I'm not sure how to accomplish the effect with it. Now I need your expertise, what would be the best way to achieve this effect?

 

Thanks!

See the Pen wGVyvd by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

I think it might be better to move the y of your line than try to animate the strokeDashOffset.

 

Make a very long line and give it a negative starting position, move far enough to get a seamless loop like:

 

var lines = document.getElementsByTagName('line');


TweenLite.set(lines[0], {y:-900})


var tl = new TimelineMax({repeat:-1});


tl.to(lines[0], 0.5, {y:-540, ease:Linear.easeNone});

http://codepen.io/GreenSock/pen/ONKZxV

It might take a little guesswork at first or try moving the line around in Illustrator to get the right starting and end values.

 

If you make the svg 600x600 it still holds up.

 

FWIW DrawSVG would not be the right tool for this. DrawSVG is only for revealing and hiding solid strokes.

[Carl]

also, when I wanted to find the right end y value I used a scrubber so that I could scrub and read the y value like: 

http://codepen.io/GreenSock/pen/ONKZBN

[Pipo]

Hi Carl,

 

Thanks a lot for your quick answer!! That's the solution I ended up choosing (plus it might have a better performance than animating stroke-dashoffset). I was just wondering if there was a "scientific" way of achieving the effect without guesswork. In the end the scrubber tips was really helpfull!!

 

Thanks a lot!