noviedo Posted November 4, 2020 Share Posted November 4, 2020 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/ExPMgQq, credits 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 More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 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 comment Share on other sites More sharing options...
noviedo Posted November 4, 2020 Author Share Posted November 4, 2020 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: Hover: Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 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 1 1 Link to comment Share on other sites More sharing options...
Solution noviedo Posted November 4, 2020 Author Solution Share Posted November 4, 2020 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. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now