Rohit Pathak

Hello @Rodrigo I followed your advice and just used Observer for my problem and guess what, I got a better output than earlier but still didn't get what you were trying to explain about using booleans. Than too please check the my codepen code if there is possibility that it can be improved upto GSAP standards, than please let me know. Secondly, I have added a section for horizontal scrolling as the page's last section. And this horizontal section seems to create a jerk on sliding. I don't know why that same jerk is not visible in codepen but it's there in my project. Even though they both share the same code base. I'm attaching a video link for that VodaMedia Demo – VodaMedia - Google Chrome 2024-04-22 16-41-54 (jumpshare.com). This is my updated codepen. https://codepen.io/yetnagtr-the-bold/pen/VwNqmdB <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Hello, I'm new to GSAP and I'm trying some handy animation. Here is what I'm trying to achieve https://genevoism.com/. I know they have used different approach but I belief such animation are possible in GSAP too. I using combination of ScrollTrigger, ScrollTo, Observer and using timeline pause and play method to achieve one scroll animation effect. By one scroll I mean that each of animation would be trigger per scroll. Approach I took : > Firstly I have made different timeline for different animation per section. > Than I tried to get user scroll using observer's onUp and onDown methods. > Than after per scroll I play my desired timeline and as one of the tween of that timeline gets completed I pause my timeline, further when user will scroll again timeline play's and pause's again. > When all tweens in one timeline gets completed, I switch to other timeline by pausing the first one. > I have also used a forEach loop on scroollTrigger.create so that I can pin the particular section as animation are being performed. What I want: I want set of animation such that when my section comes in viewport or is already present in viewport( like hero or banner ) the animation should get started as the user scroll. Each and every animation or tween should start and end between two scroll of user. And as all the animation in a section get's completed it should slide up or down as per user's scroll 100% or 100vh. Please have a look into the below pen and guide me where I'm going wrong. Thank you... <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>