Start animation for card but don't follow the scroll

[jored]

Hello everyone,

I am a new developer on GSAP.
I use the same code as the codepen in the URL.

But I would like the animation of the card to not follow the scroll.
For example if I am 10% of the container an animation this lance then if I am 50% the same animation this lance, etc ...

I spent the afternoon on it but I block.

If a person has an idea, finally that I am sure ahah

 

Thank u.

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

[mvaneijgen]

Hi @jordanmorand welcome to the forum!

 

Can you show us what you've already tried, that way we can see your thought process and thus better help you understand the tools. If you have more tries, show them all!

[jored]

Hello @mvaneijgen, thank you !!

 

Example : 

See the Pen dywqmKG by jordan-morand (@jordan-morand) on CodePen

The code is not good I think we can be cleaner.
I think that using onupdate is not a good practice and that there is a better method for that.

Also when you go up the scroll the cardboard should leave with the animation.

 

Do you have idea ?

 

Thank you so much.

 

[mvaneijgen]

You want your animation to happen on scroll, but not tie it to the scroll bar? Than you don't want to use ScrollTrigger, that is the whole idea with ScrollTrigger. I think you're looking for the Observer plugin https://greensock.com/docs/v3/Plugins/Observer

 

Check the pen below. You can scroll as much as you like, but it will only go to the next animation when the previous animation is done. Is that the effect you're looking for? 

 

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

[jored]

All right.
There is content at the top and bottom it is a landing page. On the Pen code I put that the example of the pin block.

 

When I scroll the landing page I would like when the scroll is on .container. He pin on it and continuing the scroll it makes the animations. And later releases the scroll to continue the page.

 

Observer, can it do that?

 

Thank you

 

[mvaneijgen]

Here is an example with the Observer plugin mixed with normal scrolling 

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

[jored]

OK thank you but the scroll is blocked, it is not just possible with Scrolltrigger?
I prefer that scroll is not blocked.
There is no way with Scrolltrigger just to start an animation or add a class when you are for example 10% of the PIN element?

[mvaneijgen]

ScrollTrigger is build to create an animation and hook it to the scrollbar, so that the user is in control of the animation while scrolling up and down. If that is not what you want, then I would not use ScrollTrigger. To me it sounds like you want to watch for a scroll event and then do something, that is what the Observer plugin is build for. 

 

With custom code you could probably hack ScrollTrigger to do what you want, but that is beyond the scope of these forums and is not the route I would recommend going down, certainly not if you are not yet familiar with the tools and just started learning them. 

[mvaneijgen]

Or something like this, but here the ScrollTriggers are not aware of each other, so they still can trigger at the same time. 

 

See the Pen gOZdzdB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[jored]

Thank you very much that's it !!
I will also look to observe it if it's a better way to do.

 

[jored]

Hello,

 

I made some changes with the observer; however, the animation of each card happens automatically, but I would like to keep it triggered by scrolling, like this:

When I'm on the .box, on the first scroll, it triggers the animation of card 1.
Still inside the .box, on the second scroll, it triggers the animation of card 2.
Continuing within the .box, on the third scroll, it triggers the animation of card 3.
Then, release the scroll to continue.

 

CodePen link:

See the Pen jOXoqdK by jordan-morand (@jordan-morand) on CodePen

[Rodrigo]

Hi,

 

I think you are completely disregarding how the example @mvaneijgen posted about combining Observer and ScrollTrigger. Observer watches specific events (wheel,  pointer, touch, etc) and based on that you can trigger a specific callback. Right now you are triggering a callback that animates all three elements at the same time in just one mouse wheel event. You need as many events as cards you have in your setup. Right now you have three cards, so you need three wheel events, one for each card.

 

Maybe something like this:

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

 

Hopefully this helps.

Happy Tweening!

[jored]

Thank you it's a good solution