[ScrollTrigger Scrolling Element to a speicifc position]

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:

See the Pen gOZrEZL by saifullahbutt85 (@saifullahbutt85) on CodePen

[ScrollTrigger Scrolling Element to a speicifc position]

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.

[ScrollTrigger Scrolling Element to a speicifc position]

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.

 

See the Pen LYMNqYj by saifullahbutt85 (@saifullahbutt85) on CodePen

[ScrollTrigger Nested Pinning & Text Change Animation]

@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.

[ScrollTrigger Nested Pinning & Text Change Animation]

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.

[ScrollTrigger Nested Pinning & Text Change Animation]

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.

 

 

See the Pen GRwdrwm by saifullahbutt85 (@saifullahbutt85) on CodePen

[Horizontal Scroll Anchors Using ScrollToPlugin]

Hi @karzol73

 

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

[Horizontal Scroll With GSAP Observer]

This works great. thanks @Rodrigo

[Horizontal Scroll With GSAP Observer]

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.

 

See the Pen GRYwboZ by saifullahbutt85 (@saifullahbutt85) on CodePen

[Cursor Animation]

Thanks @Rodrigo it is working perfectly.

[Cursor Animation]

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.
 

See the Pen abaxvaB by saifullahbutt85 (@saifullahbutt85) on CodePen

 

 

 

 

[Cursor Animation]

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

[Cursor Animation]

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.

See the Pen NWLJvbG by saifullahbutt85 (@saifullahbutt85) on CodePen

[Horizontal Scroll Anchors Using ScrollToPlugin]

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.

See the Pen zYLQeLZ by saifullahbutt85 (@saifullahbutt85) on CodePen

[Horizontal Scroll With Multiple Nested Animations]

Thanks @Rodrigo. sounds like increasing ScrollTrigger end pixels would solve the issue. But I've a question, what Observer is doing in this Demo?

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

[Horizontal Scroll With Multiple Nested Animations]

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.

 

[Horizontal Scroll With Multiple Nested Animations]

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?

[Horizontal Scroll With Multiple Nested Animations]

@Cassie @Rodrigo Any update guys?

[Horizontal Scroll With Multiple Nested Animations]

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

[Horizontal Scroll With Multiple Nested Animations]

Sure, Thanks @Cassie

[Horizontal Scroll With Multiple Nested Animations]

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?

[Horizontal Scroll With Multiple Nested Animations]

@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>

 

[Horizontal Scroll With Multiple Nested Animations]

@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>

[Horizontal Scroll With Multiple Nested Animations]

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.

 

See the Pen BaVZKoL by saifullahbutt85 (@saifullahbutt85) on CodePen

[ScrollTrigger Stop working while switching the routes in NextJS]

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