Strange behavior with pinnedContainer

[Willy Christian]

Hello everyone!,

Maybe what I bring to share is quite tricky for you to answer, but I'm struggled on this for a long time.
I'm working in Drupal project (CMS) and some animations were required in some components and the pen attached is a mock of the real site.

 

The animations required uses pin attribute an I could solve a sequence of animated components with pinnedContainer. However, when I have a sequence of an animation with horizontal scroll -> another animation, on the real site the pinnedContainer looks not having effect (reverting the sequence, works perfectly).

The code on the real site is pretty much the same as ind the codepen, only the name of the classes change.

I'll be glad if anyone can help/suggest anything.

See the Pen dymdbKr?editors=0010 by willychristian (@willychristian) on CodePen

[Cassie]

Hi there!

 

Quote

 However, when I have a sequence of an animation with horizontal scroll -> another animation, on the real site the pinnedContainer looks not having effect (reverting the sequence, works perfectly).

 

Could you possible rephrase this bit for me, I'm struggling to understand. 

Thanks so much (and sorry)

[GreenSock]

I read it a few times too and am equally lost, sorry @Willy Christian. We'd love to help but could you maybe isolate things further and rephrase the question with as much specificity as possible? The simpler you make the minimal demo, the more likely it'll be that you get a solid answer. 👍

[Willy Christian]

Hello everyone,
Let me see if I can be more clear.
As you guys can see in my demo, I got 2 animations in a row. Both needs to pin the page. The first, pin then scroll horizontally and the second,  pin but don't scroll horizontally.

As it is, with pinnedContainer off (check the demo), the second animations starts on the wrong position, 'cause of the first pin. Once pinnedContainer is turned on, it will start on the right position. So far, so good...
What happens on my site is, even with the pinnedContainer turned on, it still not working (the second animations starts on the wrong place), but if I change the order witch they appear, on the page (first, the pin without horizontal scroll and then the other one), it will works totally fine.
What I was asking was an advise, about what kind attribute/setting on the page could affect the gsap to act like this.

I mean, I know it's something really complicated to ask, mainly because it would be necessary to evaluate all the page to reach a conclusion, but if you have any suggestions it would be most welcome.

Thanks in advance

[GreenSock]

So the CodePen is working exactly as expected, right? 

 

It sounds like on your site, you must be creating things in the WRONG ORDER. You should always create things in the order they occur on the page. If you cannot do that, then use refreshPriority to tell ScrollTrigger which things are a higher/lower priority so that when it calculates the start/end positions, it occurs top-to-bottom based on those refreshPriority values. See the docs for details. 

 

If you still need help, please make sure you provide a very clear minimal demo that illustrates the issue. It doesn't help much if you provide a CodePen that doesn't illustrate the problem (and say it only happens on your live site). We can't effectively troubleshoot a live site either since there are so many factors involved. 

 

Good luck!