SaifUllah

Hi @alig01, Thank you for a quick demo, seems like it does the job, all though I found out another pen which does the same and worked for me, Thanks. Here's the Pen which helped: https://codepen.io/saifullahbutt85/pen/gOZrEZL

Hello @Rodrigo Thank you for your response, I'm trying to implement it, but seems like I'm doing something wrong, could you please check and help? Also, Flip is not what I need, I guess. https://codepen.io/saifullahbutt85/pen/LYMNqYj

Hello everyone, I'm trying to move the globe/earth Image under the hand of the Lion (you can see the image below), but it is not getting responsive, I've used the MatchMedia as well but still having issues, is there any way or technique which I can use to make it perfectly responsive and move to that specific position? I would greatly appreciate your help.

@mvaneijgen Thank you for your response and suggestions. I apologize for not providing any code examples in the initial post, I've attached the old pen by mistake. Anyways, I've found the solution in the old thread shared by @akapowl. Also, I appreciate your recommendation to use CodePen and create forks to iterate and experiment with different ideas. It sounds like a valuable approach to refining and improving the animation implementation. Thank you guys for your insight and sharing your personal workflow. I will implement these suggestions and continue exploring different approaches to achieve the desired animation effect.

Hi @akapowl I completely understand that providing custom code solutions for every website effect may not be feasible. I appreciate your suggestion of referring to a previous thread where a similar implementation was discussed. I will make sure to check it out and see if the suggestions offered can be of assistance to my project.

Hello everyone, I am seeking assistance in creating an animation similar to the video provided below using scroll smoother and scroll trigger. I would greatly appreciate your help. Thank you in advance for any support or guidance you can offer.

Hi @karzol73 No I've not found any solution yet, the issue is still there and didn't get resolved yet.

This works great. thanks @Rodrigo

I am currently facing an issue with the GSAP Observer in a horizontal scroll scenario, where it seems to be extending beyond the intended boundaries and causing additional vertical space. Specifically, when using the GSAP Observer in a horizontal scroll setup, I notice that it does not terminate properly, resulting in unwanted vertical spacing. It should end on last Green Section same like normal scrolling behavior. I would greatly appreciate any insights or suggestions from the community regarding this issue. Are there any known workarounds or best practices that could help resolve this issue? Any assistance or guidance would be highly appreciated as I strive to find a solution to this problem. Thank you in advance for your time and support. Screen Recording 2023-05-21 at 6.45.14 AM.mp4

Thanks @Rodrigo it is working perfectly.

This method isn't working fine on Scroll. whenever I scroll down the cursor follower automatically goes far to bottom. You can watch the video below and check the codepen. https://codepen.io/saifullahbutt85/pen/abaxvaB Screen Recording 2023-03-29 at 1.36.28 AM.mov

Hi @GreenSock Thank your for this method, I'll definitely use it.

Hi guys, is it possible to convert that red colored div (background) into the cursor follower like the white one (wherever my cursor is)? white is just an example to show how red div (background) should look after converting from background to custom cursor.

Hi Guys, I'm trying to create sections navigation on Horizontal Scroll, but my offsetLeft isn't calculating fine. could please have a look and let me know the issue, seems like this issue is because of ScrollTrigger end value/option but I really need this option and same value to make my Animations slower and smoother. What could be the possible solution to get 100% accurate offsetLeft without removing the ScrollTrigger end value? Thanks.

Thanks @Rodrigo. sounds like increasing ScrollTrigger end pixels would solve the issue. But I've a question, what Observer is doing in this Demo? https://codepen.io/GreenSock/pen/NWMxRvM

Hi @Rodrigo. Thank You, I've followed this concept and applied the Scroll Smoother on the site below, but still it is not really smooth as the demo Above, could you please check and let me know that what could be the issue? Scroll Smoother is working fine but Animations are moving too fast while Scrolling with Mouse Wheel. When I use mouse wheel faster, something happens like this.

Hi, Thanks @Rodrigo. I'll follow the Single Responsibility Principle and will definitely setup the GSAP context. On the other hand I've another Question, Should I use Scroll Smoother for making this Horizontal Scroll Smoother? or I should increase the animations duration time to have smooth scroll & animation effect?

@Cassie @Rodrigo Any update guys?

Hi @Cassie, Hope you're doing well. I've used the same approach in NextJS, and now I'm trying to make the separate Component of each Section, could you please help me to simplify the code? I wanna move every section's GSAP Code in its own Component to manage every Section Animation separately. You can see the code below. Thanks! https://stackblitz.com/edit/nextjs-brywes?file=pages/index.js

Sure, Thanks @Cassie

Hi @Cassie Thank you so much, this is exactly what I want. Now as you said, could you please help me to Simplify this Code and let me know the possible easy ways to achieve the same thing as I would have multiple animations in each Section?

@Rodrigo Thank You, but this is kinda same as before, I think I didn't explain well, I want Multiple & Different Animation in every single Section. Please have a look into the HTML below. As you can see, Section 2,3 and 4 child's has different classes and I want to animate each section child differently according to its class. <div class="container"> <section class="panel red"> Section 1 </section> <section class="panel orange" data-pin="true"> <h1 class="title-fade-in-left">Section 2</h1> <p class="text-fade-out-left">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <div class="box-rotate"></div> </section> <section class="panel purple" data-pin="true"> <h1 class="title-fade-in-right">Section 3</h1> <p class="text-fade-out-right">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <div class="box-zoom-in"></div> </section> <section class="panel green" data-pin="true"> <h1 class="title-fade-in-top">Section 4</h1> <p class="text-fade-out-top">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <div class="box-bounce"></div> </section> <section class="panel gray"> Section 5 </section> </div>

@Rodrigo Thank you for your answer, I still have a confusion. Could you please clear, what if have multiple and different classes in every single Section? How can we Animate/Manage multiple classes of each Section in loop? For Example: in Section Purple, what if I have something like below? <section class="panel purple" data-pin="true"> <h2 class="title-fade-in">Section Purple</h2> <div class="box-shape"></div> <p class="fade-out-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <img src="demo.png"> </section>

Hi Guys, Could you please let me know how can I add the Multiple Nested Animations in Horizontal Scroll? I want same Section 2 nested pin Animation for Section 3 & 4 or Multiple. https://codepen.io/saifullahbutt85/pen/BaVZKoL

Okay, Got it, I haven't killed the ScrollSmoother, Everything is working fine now, Thank you very much @SteveS & @GreenSock for your kind support.