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

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.

Hello @PointC (and anyone else) I would like to ask something else... I'm working this implementation on a Web site (witch is Drupal) and it doesn't have the same behavior as in the codepen (and I have no idea why)... If I implement as you show me, it works when I load the page but when I resize the page, the breakpoints set to handle it seems not working, because the animation crashes. Any idea/tip that I could try to solve it ?

Thank you so much @PointC ! That works perfectly! (and it was so easy XD)

Hello guys! I would like to ask you for a tip/help with this situation (codepen). I have an animation that has a different position depending on the screen size. So I would like to have multiple start/end positions for each breakpoint. However, when I set matchMedia(), it looks like gsap is keeping the previous points instead of killing it (as I read in the docs) which is causing interference in the timeline. Maybe I just misunderstood the correct way to use it or I just didn't fully understand how to use the library.