Jump to content

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

SVG Sine Wave Timeline

Recommended Posts

Hi folks! I need help to implement a new timeline from tweens that are building into a loop. (btw, I use as a base this pen https://codepen.io/osublake/pen/ExPMgQqcredits to Blake Bowen)


If is use a gsap.exportRoot() into a const, I have control over the timeline (but there isn't apply to use into a component) .

So but I use tl.add(tween) into the loop I can't reach the same result :(. Also I tried with tl.add(tween, 0) but isn't work for me.

Surely I'm doing something wrong, but I can't discover what, so if you can help me I will be appreciated. Thanks. 😊

See the Pen xxOzzae by nazarenooviedo (@nazarenooviedo) on CodePen

Link to post
Share on other sites

Hey noviedo. What you're asking for is tough because infinite tweens inside of timelines doesn't make much sense. 


Why not just keep track of the tweens using an array instead? 

See the Pen gOMKNmx?editors=0100 by GreenSock (@GreenSock) on CodePen

Link to post
Share on other sites

Hey @ZachSaucier thanks! yes, I tried using an array but my question is, how can I to set a specific position for each one?.

For example, if I use a timeline I can use the .tweenTo() to reach a specific position, but doesn't available for tweens.

In my challenge I need to have paused the line at the load, so when you do a hover, this line moves forward, but when you leave the hover I need to reverse to the first position. (I leave here some images to try explain)

Initial Position & Mouseleave:


Link to post
Share on other sites

If you're animating that line that you show in the images then what you're trying to do with Blake's pen is overkill. Just create a line that looks like that and translate it to the right. When un-hovered translate it to the left. Simple :) 

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Thanks so much! you gave me a great idea, I just use a a fixed width for the viewBox and just move the inner group along x axis. :)


Link to post
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.