Ramzdam Posted April 21, 2022 Share Posted April 21, 2022 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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 21, 2022 Solution Share Posted April 21, 2022 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. 4 Link to comment Share on other sites More sharing options...
Ramzdam Posted May 7, 2022 Author Share Posted May 7, 2022 Well not exactly but somehow this helped me find a different approach. Appreciate your help Link to comment Share on other sites More sharing options...
Ramzdam Posted May 9, 2022 Author Share Posted May 9, 2022 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 Link to comment Share on other sites More sharing options...
akapowl Posted May 9, 2022 Share Posted May 9, 2022 Looks, like you've already got your question answered in this other thread of yours, correct @Ramzdam? Please avoid posting douplicates. Link to comment Share on other sites More sharing options...
Ramzdam Posted May 9, 2022 Author Share Posted May 9, 2022 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now