Timeline: How to get a reference to animated elements?

[Asored]

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

[Rodrigo]

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!