Ramzdam

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

You're my SUPERHERO!!! LEGEND as always.. thanks dude

Is there a way to unobserve the component if it reaches a certain index? Example. If I have 10 elements and is Observing the scroll or mouse wheel for that element. Per scroll one element will animate. Then when it reaches the last element (10th element) it will stop observing it and will proceed with the normal scrolling. But if I scroll back to that Component (with observer previously attached) it will start Observing the element again and animate the element inside it again. Just like in the sample codepen above. It scrolls like a carousel. But what I want is when it reaches the last element it will stop its observer so that I can continue with the normal scroll. Is there a way to do that?

Thanks for this. Just found out that I'm using version 3.9 while Observer is introduced in 3.10

One of the answer I found in the forum while searching for the animation I like is to use Observer. Now I don't know how to start or where to begin specially with importing it. I tried import { Observer } from "gsap/Observer"; gsap.registerPlugin(Observer); but it says that its not defined or can't find the class Observer. How do I use this? I saw one post saying I need to use Reactjs or start looking for React. But we are not using Reactjs. We are only using Drupal Twig Template and simple HTML. How can I use this plugin? Can someone share any useful link I can follow? Thanks in advance

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

Guess you're right about this. I encountered an issue with the scroll scrub. Specially when I try to scroll really fast it plays the animation based on the number of scrolled item which is not what I want. Seems that Observer is the way to go. Thanks

I would like to create an animation like the link below. If possible I want it to be like a film scrolling like in cinema or something. Can someone please let me the how to create this kind of animation? The hard part is the top and bottom mini thumbnail getting position like what is shown. I'm not sure what should I use if I should use a scrub or is my HTML structure wrong and will not help achieving the animation I expect. https://s3.eu-central-1.amazonaws.com/www.glenfiddich.com/Screen+Recording+2022-05-07+at+6.18.53+PM.mov

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

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