gsap animations seems to end before it played to the end

[iamruletik]

Hello guys )
Trying to create animation in which whenever you hover over the specific text everything else but text dissapears and video became visible on the background. But I run into some problem. If I hover only on one text block and the leave it then it's working properly. But when I'm trying hover over few text blocks then sometimes some elements either became invisible or partly visible. Like animation starts and abruptly ends.

(Try to hover over "design and branding", "advertising", "web")

See the Pen MWzdZdW by iamruletik (@iamruletik) on CodePen

[mvaneijgen]

Some of your elements are not in your minimal demo, so I had to remove them from the timeline. 

 

I think the only issue was that you were getting the hoverableLink's inside the loop. If you place the following outside the loop everything works as expected.

 

      let items = gsap.utils.toArray(hoverableLink);
 

Hope it helps and happy tweening! 

 

See the Pen PoxvLVW?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[iamruletik]

@mvaneijgen Thanks for the answer )
But actually problem still exists

When I hover over link and the hover the other, then first link became invisible. I think when I hover over next link gsap runs the animation but previous animation stops. And i don't know how to solve this

[iamruletik]

And in my version this occurs when I leave hover over link (Whole text becames invisible)

[iamruletik]

I believe the issue might be arising due to the presence of three separate animations that control the same elements. When I hover over one link, the entire text should become invisible. However, when I hover over the next link, the same text should also become invisible. In reality, it seems that the text begins to regain opacity from the mouseleave animation, and then another animation promptly starts, affecting the same text and causing it to become invisible. Unfortunately, the previous animation doesn't even get a chance to complete before this new animation takes over.

[Cassie]

Heya!

 

So the best approach here is likely just using tweens. Tweens are more dynamic and ideal for stuff like this. They'll take whatever the property value at that particular point in time is, no matter what it is, and tween to the property value you've specified.

See the Pen LYXoKGX?editors=0110 by GreenSock (@GreenSock) on CodePen

Timelines are great for control, but it can get fiddly if you're animating the same elements in multiple timelines. Sometimes using overwrite:auto and immediateRender:false can help get the behaviour you're after, there's also an invalidate() method that you can call on a timeline that flushes out stored starting values, that can also be helpful too.

See the Pen OJggZgK by GreenSock (@GreenSock) on CodePen

But yeah, I'd likely go for tweens for anything more dynamic and event driven! 

Hope this helps ☺️

[iamruletik]

@Cassie thanks a lot ) with your code I was able to make what I needed and it was much simpler than my first attempt

See the Pen WNYBqVd by iamruletik (@iamruletik) on CodePen