Scott Borrowman

What I'm hoping to get to happen is rebinding the element within the timeline because if the user interacts with the carousel that exists after the animation is finished, the second element is now where the first element was. I understand that the timeline is created on page load so my question is about rebinding that new element within the timeline. It sounds like there isn't an option for that so it would have to be a new timeline in order to get this effect to work.

Here's a quick codepen that's what I'm trying to do. onEnterBack() there is a possibility that I need to change the element that is being animated. https://codepen.io/shborrowman/pen/gOxxzvM

Unfortunately, what the client wants is kind of ridiculously complex so I'm not sure how easy it would be to set up a demo but maybe I can describe the animation I'm trying to create. Basically, I have an image that goes through some animations while scrolling and eventually turns into the image of the first slide in a carousel. I have the animation all working but the issue is that the backwards animation breaks if the user moves to a different slide in the carousel because my animated image is still the image from the first slide. I want to try to make it so the backwards animation gets updated with the new active slide image. The problem is that it seems I can't simply just update my variable with the onEnterBack() function.

It looks like all the dom elements get bound within the timeline on load, which makes sense, but I'm wondering if it's possible to update that when you scroll back into the timeline? Meaning like, if I have something like this let element = document.querySelector('.first-element'); and then within a timeline I do an animation to it t1.fromTo(element, { opacity: 0 }, { opacity: 1 }); then because of other stuff that happens on the page, I need that to target a different element onEnterBack so I add this onEnterBack: () => resetTarget() const resetTarget = () => { element = document.querySelector('.new-target'); } The timeline still targets to first element when reversing the animation. Is there a way to update that element or would I essentially have to create two separate timelines that trigger based on scroll direction?