Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Scott Borrowman

Updating target elements in the timeline onEnterBack?

Recommended Posts

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?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi Scott,


It's very difficulty for us to provide help without seeing some code I'm afraid.

 

When we ask for a demo we don't mean a polished example of the entire project. Just a minimal test case with a few divs and some comments or console logs to explain the issue.

Would this be possible?

 

  • Like 1
Link to comment
Share on other sites

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.

See the Pen gOxxzvM by shborrowman (@shborrowman) on CodePen

Link to comment
Share on other sites

This certainly seems a little knotty logic wise to me.

Hypothetically what would happen on enterBack?

The timeline would be playing through in reverse, scrubbed to the scrollbar - reverting the element to it's original state on the left.

The second element is already on the left, so *if* the element was swopped out, would you expect the element to jump to the right and then scrub back? What would the first one do, stay where it is or get reset?

The timeline is created on page load too, so changing the element won't do anything. You'd have to kill the timeline and recreate it. That could work but if you're halfway through a scrub that's going to jump and look messy.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×