Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Pipo

Continous dashline animation

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×