Asored Posted November 11, 2022 Share Posted November 11, 2022 Hi there! First of all, sorry for always coming up with such tricky questions here. In my application, the user can create timelines via a UI. I store all created timelines in a variable and can access them later to play them as needed. Now I had the case that every item of a navigation should be animated on mouseenter. Here it became a challenge for me to find the right timeline for the right item. I added comments to my codepen code and I tried to create my project as simple as possible minimized. Simply asked, do I have the ability to get a reference in the timeline object to the elements it will animate? If so, I could just query that. Or is there a better solution for my use case? See the Pen VwdpNvq by asored (@asored) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted November 11, 2022 Share Posted November 11, 2022 Hi, You can use the static method getTweensOf(myElement) in order to get an array of the GSAP instances associated with that element. https://greensock.com/docs/v3/GSAP/gsap.getTweensOf() Also you can create an I'd for a GSAP instance based on a data attribute and then find that tween with The getById() method https://greensock.com/docs/v3/GSAP/gsap.getById() Another alternative is to add a reference to the tween directly on the DOM node: const myElement= document.getElementById("myElement"); const t= gsap.to(/*...*/); myElement._twen = t. // later in your code myElement._t.play(); Happy Tweening! 1 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