Reversing Animation to Intermediate State

[smackdab]

Imagine a page with two simple gsap.to animations.  The first animation moves a box from its original position at the left margin to a new position 25% across the page to the right.  The second animation moves the box from its second position to a third position that is an additional 25% across the page.  Now imagine triggering the two animations using scrolltrigger.  The scrolltrigger statement for the two animations includes a toggleActions statement of: "play none none reverse".

The problem is that when I'm reversing scroll from the third state back to the second state by scrolling up from the bottom, the box returns to its original position at the left margin, not to its second position 25% across the page.  My question is: how can I get the "reverse" from the third position to get the box to go to the second position rather than to the box's original position?

I know I should provide a codepen here, but I'm very new to GSAP and having trouble getting even a simple codepen on this.  Thanks for any help.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you. Even not working demo's are great, because we can at least see the code you've written which gives us an indication of what route you've already gone down. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

If we could see your code it would be really helpful, because to me it sounds like you're missing a vital tool when working with GSAP/ScrollTrigger. Timelines. Your questions sounds like you're using two single gsap.to() tweens, both with a ScrollTrigger object on them, but if you want things to happen in sequence, that is what timelines are for. 

 

Take a look at the following post, it is a really great resource (the previous post as well) to get a better understanding how to use GSAP. 

 

 

 

But yeah, a minimal demo would be great because: 

 

✨ A demo speaks 1000 words ✨
 

[Carl]

I'm 100% with @Rodrigo and @mvaneijgen in that it is MUCH better if you provide a demo even if it's broken.

We have no idea if the box that moves left to right also moving vertically as the page scrolls. If not, what holds it in place? Is it pinned?

Also we don't know what is triggering the animations (a big part of ScrollTrigger). There are just way too many factors for us to guess at which may or may not be involved with what you are seeing.

 

However, I found this interesting in that I suspected that having multiple ScrollTriggers animate the same object may introduce some un-expected behavior so I put together a little test.

 

See the Pen eYQQLrV by snorkltv (@snorkltv) on CodePen

 

the yellow section triggers the first movement of the red box.

the blue section triggers the second movement.

 

In my setup it proved useful to use a fromTo() on the second ScrollTrigger.

The trouble  you most likely encountered is that the second ScrollTrigger is using the existing starting x value of the box when the page loads. it doesn't know the first ScrollTrigger is going to move it.

 

Hopefully this gets you closer to what you are going for.

[smackdab]

Yes, @Carl!  That's exactly the kind of help I was looking for.  I won't have time to adapt this to my application until tomorrow, but the fromTo() sure looks like it's going to solve my problem.  But by sending me such a helpful answer,  I fear you've only encouraged others to submit questions without code examples.  I'm kidding!  I realize it's much easier to understand questions when they include examples, so thanks even more for putting together an example of your own.