[Multiple element animation per scroll on single trigger]

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

[Unregister the Observer]

29 minutes ago, OSUblake said:

You can check for that condition and then disable the observer.

https://greensock.com/docs/v3/Plugins/Observer/disable()

 

But I would advise against trying combine normal scrolling with the Observer as it can get overly complicated. That is something you will need to figure out on your own.

 

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

[Unregister the Observer]

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?

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

[How to use and import Observer]

18 minutes ago, OSUblake said:

Hi Ramzdam, 

 

 

Please don't do that. You do not need React.

 

If you're using modules, then you should do the import thing, otherwise just a <script> tag.

 

https://greensock.com/docs/v3/Installation?checked=core,observer

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Observer.min.js"></script>

 

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

[How to use and import Observer]

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

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

[Multiple element animation per scroll on single trigger]

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

[Create a Film Scroll effect with scrub]

4 hours ago, GreenSock said:

That looks like something that isn't really driven by a true scroll at all - it's likely just listening for events (wheel/touch/pointer) to trigger animations. You could use Observer for that, sorta like this demo: 

 

 

 

Good luck!

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 

[Create a Film Scroll effect with scrub]

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

See the Pen OJzqWpO by madz-ullang (@madz-ullang) on CodePen

[Multiple element animation per scroll on single trigger]

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

[Multiple element animation per scroll on single trigger]

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