Jump to content
Search Community

SVG Sine Wave Timeline

noviedo test
Moderator Tag

Go to solution Solved by noviedo,

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 comment
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:
181487819_ScreenShot2020-11-04at11_12_09.thumb.png.72de7c1d5d7c7b8637aaeaea3d254b07.png

Hover:
1539688035_ScreenShot2020-11-04at11_12_32.thumb.png.ca88558fa4c2bbaaf58b0fd6ca51dcff.png

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.
×
×
  • Create New...