How to reverse animation and play next with Scrolltrigger.observer?

[FrEZ]

Hello, I am trying to make a consecutive animation on scroll that reverses the previous one and then executes the new one. Is this an optimal way, as I am trying to have different animations for each container? If not, can someone please show me a better one? Thanks a lot!

 

let tlForText = gsap.timeline();

    let indexForText = 0;

    const textAnimations = {

        1:  function() {

        indexForText = 1;

        tlForText .to('first-container', {

x: -100,

})

}

        },

        2: function() {

        indexForText = 2;

        tlForText .to('second-container', {

x: 100,

})

        },

        3: function() {

        indexForText = 3;

        tlForText .to('third-container', {

y: -100,

})

        },

        4: function(){

        indexForText = 4;

        tlForText .to('forth-container', {

x: -100,

})

        }

        5: function(){

        indexForText = 5;

        tlForText .to('first-container', {

x: 100,

})

        },

    }

    const funcForText = (index) =>

    {

index= indexForText;

        if(index==! 0){

            tlForText.reverse();

        }

        textAnimations[index]

    };

 

    ScrollTrigger.observe({

        targer: window,

        type: 'wheel, touch',

        onUp: () => funcForText( indexForText - 1 ),

        onDown: () => funcForText( indexForText + 1 ),

    })

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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

 

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

[FrEZ]

See the Pen VwBQPev?editors=1111 by FrEZy (@FrEZy) on CodePen

[Cassie]

Sorry, I really don't understand what this demo is meant to be doing.

It looks like you have a global timeline and each time you scroll up or down you're adding a new animation to the timeline? You'll end up with a *huge* timeline with tons of animations on it this way? I'm pretty certain that's not what you're intending to do? I scrolled up and down a few times and you have over 400 tweens added to that timeline, with a total duration of almost a quarter of an hour.
 

 

 

See the Pen NWBypdm?editors=0011 by GreenSock (@GreenSock) on CodePen

Happy to help but you're going to have to give me a little help, maybe you could explain a little more about your goal?

 

[FrEZ]

1 hour ago, Cassie said:

Sorry, I really don't understand what this demo is meant to be doing.

It looks like you have a global timeline and each time you scroll up or down you're adding a new animation to the timeline? You'll end up with a *huge* timeline with tons of animations on it this way? I'm pretty certain that's not what you're intending to do? I scrolled up and down a few times and you have over 400 tweens added to that timeline, with a total duration of almost a quarter of an hour.
 

 

 

 

 

Happy to help but you're going to have to give me a little help, maybe you could explain a little more about your goal?

 

 

 

Hi! I am trying to make a container appear with a certain animation and when the user scrolls, this animation reverses and the next animation comes in. Also if the nav menu is clicked, the current display reverses and the corresponding container appears. The thing is I am trying to make a couple of containers appear/disappear with certain animations, thus I am trying to use functions. If there is a more optimal way, please let me know, just bear in mind that for the first function there could be 3 containers, for the second 1, for the third 4, thus making it more complex.

Hope you can help!

 

All the best!

[Cassie]

Sorry I just don't follow.

 

Have you got a demo that shows vaguely what visual effect you're trying to go for?

[FrEZ]

8 hours ago, Cassie said:

Sorry I just don't follow.

 

Have you got a demo that shows vaguely what visual effect you're trying to go for?

Check out how the text appears on this page Pixelynx. When you scroll, the old containers reverse and the new ones appear with different animations.

[Cassie]

Ah ok! That makes a lot more sense. Thanks

Right, so one approach could be to have one function that triggers some animations. Then in that function you can write custom logic to play different animations depending on what index number is passed through.

 

You definitely don't want to add loads of animations to a global timeline every time you trigger an event. That's not going to work,, timelines are for sequencing animations, and right now you're just sequencing hundreds of animations and never playing them.

 

Something like this? 

See the Pen a49071b4bf576e039b4e8cdad4d8f006?editors=0010 by GreenSock (@GreenSock) on CodePen

[FrEZ]

That's sort of it, but as I stated above, it needs to be in separate functions, as the display, animation and positioning is different for each state. 

[Cassie]

Sure - you can call different functions. You can make it as complex as you need.

The key thing to understand here is that all the animations are seperate and not being added to one giant master timeline.

 

Not really sure how to help you further on this as the example above is a pretty decent base to build upon! This kind of thing requires a lot of custom logic that's going to be very dependant on your specific problem. We can definitely guide you in the right direction but we don't have the resources in these forums to help you work out the specifics.

You can create any sort of logic necessary in that function though. You could hypothetically create a bunch of different animations and then play and reverse specific ones dependant on the direction and index.

 

--- pseudo code ----

let tl1 = gsap.timeline({paused: true})
tl1.from() ... etc

let tl2 = gsap.timeline({paused: true})
tl2.from() ... etc

let tl3 = gsap.timeline({paused: true})
tl3.from() ... etc


function gotoSection(index, direction) {
if(index === 1 && direction === 1)
  tl1.reverse()
  tl2.play()
}
}