I'm encountering an issue where some animations complete early due to the horizontal scroll pinning, even though I've provided a pinnedContainer.

[Dev Hardik]

Hello team,
I'm not fluent in English, so I've written my query in my native language and translated it to English.

 

I've created three animations using GSAP ScrollTrigger:
- Text fadeup animation
- Horizontal scroll animation
- Color change animation

 

The animations work fine until section 3. In section 4, there are two animations: one for color change and the other for horizontal scroll with pinning. In section 4, I'm encountering an issue where the color animation completes early due to the horizontal scroll pinning.

 

Although I've provided a pinnedContainer, the fadeup animation isn't working after section 4. However, I've added the color change animation again after section 4, and it is working.

 

See the Pen YzgqeGV by dev-hardik71 (@dev-hardik71) on CodePen

[Cassie]

Hi! It's important to create your ScrollTriggers in the order they appear on the page, you can't do that in this example because you're looping around for the colours.

You can use .sort to reshuffle and organise your scrolltriggers if you can't define then in the right order.

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/

 

You don't need to pin the content, so you don't need pinContainer - you can just pin the horizontally scrolling section.

If you do this you'll also need to change the end trigger based on whether the section is pinned or not.

let isPinned = elements.classList.contains("pin");

ScrollTrigger.create({
  trigger: elements,
  start: "top center",
  end: () => isPinned ? `+=${scrollList.clientWidth - introWrapper.clientWidth}` : "bottom 60%",
  ...
})

See the Pen bGZpvzp?editors=0011 by GreenSock (@GreenSock) on CodePen

 

I hope this helps!

[Dev Hardik]

@Cassie,

 

Thank you so much for your incredibly helpful guidance! Your explanation about organizing the ScrollTriggers using .sort() and the approach to adjusting the end trigger based on the pinned section was invaluable. I truly appreciate the time and effort you took to clarify the complexities I encountered in my animations.

 

Your expertise and support have provided me with a clear direction to enhance my project. I'm deeply grateful for your mentorship—it's been immensely beneficial!

Warm regards,

@Dev Hardik

[Cassie]

💚 Thanks for the kind words and good luck with the project! 

[Yashwanth S C]

Hi Gsap Community,

        I am too facing the same issue my first three components the introloader, landing and about page works perfectly but then i have added the "Traction.jsx" Component which has a horizontal scroll, after that i have added the Services.jsx but in this component the gsap scroll trigger code works correctly but after that i have added title reveal code for both Ecosystem.jsx and Partner.jsx where these execute when i am in the traction component itself.

      I am a GSAP Novice , sorry my code might not be fully optimised, but i have linked the sandbox for your reference.

CodeSandbox <--- please click here to view it.

     

[GSAP Helper]

Hi @Yashwanth S C.

 

I couldn't get your CodeSandbox link to run at all. Couldn't see any of your code. Plus I had a hard time following your question and this thread is over a month old. I'd suggest starting a new thread please and here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

Would you mind clarifying your question please and making sure that you include a minimal demo that illustrates the problem so that we can help you? Stackblitz is probably a better option than CodeSandbox. Here's a starter template you can fork: https://stackblitz.com/edit/react-cxv92j

[iamStudent]

@Cassie, I am too facing the same issue, in this solution, the issue is still exists, in section 4 fadeup animation still not working.

 

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

[iamStudent]

On 1/7/2024 at 8:02 PM, Cassie said:

Hi! It's important to create your ScrollTriggers in the order they appear on the page, you can't do that in this example because you're looping around for the colours.

You can use .sort to reshuffle and organise your scrolltriggers if you can't define then in the right order.

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/

 

You don't need to pin the content, so you don't need pinContainer - you can just pin the horizontally scrolling section.

If you do this you'll also need to change the end trigger based on whether the section is pinned or not.

let isPinned = elements.classList.contains("pin");

ScrollTrigger.create({
  trigger: elements,
  start: "top center",
  end: () => isPinned ? `+=${scrollList.clientWidth - introWrapper.clientWidth}` : "bottom 60%",
  ...
})

 

 

 

I hope this helps!

@Cassie, I am too facing the same issue, in this solution, the issue is still exists, in section 4 fadeup animation still not working. help me

[Rodrigo]

Hi @iamStudent and welcome to the GSAP forums!

 

Please don't tag users directly on your posts. We try to respond to threads as soon as possible so there is no need for tagging.

 

Also you're using a demo from the GSAP collection that is working as expected so we can't really see any issues on that. You have to create a minimal demo (emphasis on minimal please) of your own so we can see what you're trying to do and what the issue could be.

 

Happy Tweening!