[I'm encountering an issue where some animations complete early due to the horizontal scroll pinning.]

Please check this demo, Image reveal animation is not working in the white section gallery.

 

See the Pen LYvPdpd by Students-the-sasster (@Students-the-sasster) on CodePen

[I'm encountering an issue where some animations complete early due to the horizontal scroll pinning.]

The animations work fine until section 3. In section 4, fadeup animations complete early due to the horizontal scroll pinning.

See the Pen jORNyXm by Students-the-sasster (@Students-the-sasster) on CodePen

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

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

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

@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