Update fromTo element on button click

[SRInteractive]

I am wanting to set which image animates based on a button click. So if I click the first button "E18MCL" then the dinosaur would animate. Then if I scroll back up and click the other button "E18MML" then the giraffe would animate. I am using JS to set a class (marquee__modals--active) on the image I want to animate on button click. This is working correctly, the class is added when needed. My issue is that my fromTo tween seems to grab the element on page load then never reloads it. So on page load the dinosaur has that class, so every button click makes him animate, even if the giraffe has the class later.

 

My current code is attempting to be a bit dynamic, but I tried hardcoding the classes and just making two click event listeners. This worked for the first click, but then with the second click both images animated. I'm guessing I need to kill something but I'm not sure where to do that.

 

Thank you!

See the Pen ZEoBbWE by matiaward (@matiaward) on CodePen

[Rodrigo]

Hi,

 

The solution I can think of in terms of making this more dynamic is to loop through the modal elements and create a ScrollTrigger instance for each and give them a unique ID property. After creating each ScrollTrigger disable all of them but one, which should be the default one. Then on the click event disable the current active instance and enable the one targeted by the particular button.

 

Here you can check the documentation for the features mentioned above:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.getById()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/enable()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable()

 

Finally here is a live sample so you can see it in action. You're going to have to tinker it a bit in order to set the correct final position of the Giraffe. Another option could be to mix ScrollTrigger with the Flip plugin in order to forget about positions and stuff like that:

See the Pen vYjyypX by rhernando (@rhernando) on CodePen

 

Happy Tweening!!!

[SRInteractive]

All my searching and I never came across disable() 🤦‍♀️ Thank you so much!