Multiple element animation per scroll on single trigger

[Ramzdam]

Is there a way to have an animation triggered via scrolltrigger but with a single trigger target. Example in the sample codepen. I have .section as it's trigger point. So when I enter that container there's an animation SCROLLTO animation being run. Right after the animation when the user scroll the mouse it plays the first element in the container so for this instance it's the .whisky-name class. Then when I scroll again it plays the next class which is the .whisky-bottle-and-summary. After it plays the element inside the first .section it will go to the next instance of .section class so the animation is the same with the first .section class. But since the second .section class have different element and possible different animation how can I implement that?

 

So basically what I want is the .section (parent container) has an animation being triggered by scrolling (scrub is false). Then while inside that same .section class  when it scrolls it should not go to the second .section class but instead play the animation of it's child first. When all animations of the children are done then when I scroll again it goes to the second .section and play an animation. And the same thing after it plays the second .section animation it will play the animation of it's children when I scroll.

 

As you can see in the codepen the animation of the first .section children automatically plays when the parents are triggered. But what I want is it only plays the animation each time I scroll the mouse.

 

 

Sorry for the confusing question. Hope you were able to understand what I'm trying to achieve

See the Pen OJzqWpO?editors=1111 by madz-ullang (@madz-ullang) on CodePen

[akapowl]

Hello @Ramzdam

 

If I understand correctly, what it is you are trying to go for, you will probably not want to use ScrollTrigger for that but create some sort of slider logic listening to events like 'wheel' and 'touch' instead, sort of  like this one below. For that, the new Observer Plugin will be a great base, but keep in mind that it only is a helpful tool for listening to the neccessary events - all the logic you'd need around that, you'd have to create yourself.

 

https://codepen.io/collection/KpNYOd

 

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

 

 

 

 

This older post of mine here shows one possibility of how to include a delay for the goToSection function being called to allow other animations to be played before moving -  but it also clearly shows, why ScrollTrigger (and the basis of native browser scrolling) is not the right choice to achieve something like that. 

 

 

[Ramzdam]

Well not exactly but somehow this helped me find a different approach. Appreciate your help

[Ramzdam]

On 4/21/2022 at 4:20 PM, akapowl said:

Hello @Ramzdam

 

If I understand correctly, what it is you are trying to go for, you will probably not want to use ScrollTrigger for that but create some sort of slider logic listening to events like 'wheel' and 'touch' instead, sort of  like this one below. For that, the new Observer Plugin will be a great base, but keep in mind that it only is a helpful tool for listening to the neccessary events - all the logic you'd need around that, you'd have to create yourself.

 

https://codepen.io/collection/KpNYOd

 

 

 

 

 

 

 

This older post of mine here shows one possibility of how to include a delay for the goToSection function being called to allow other animations to be played before moving -  but it also clearly shows, why ScrollTrigger (and the basis of native browser scrolling) is not the right choice to achieve something like that. 

 

 

How do I import Observer to my project? I get this error Uncaught ReferenceError: Observer is not defined. I tried importing it like so import { Observer } from "gsap/Observer"; It says that observer is not available or something

[akapowl]

 

Looks, like you've already got your question answered in this other thread of yours, correct @Ramzdam?

 

Please avoid posting douplicates.

 

 

[Ramzdam]

8 minutes ago, akapowl said:

 

Looks, like you've already got your question answered in this other thread of yours, correct @Ramzdam?

 

Please avoid posting douplicates.

 

 

Yes got the answer. Thanks will this this thread. Thanks for the help