Théophile Avoyne

Yes @shikari I did. Check this topic (especially GreenSock's answer at the end):

Hi Jack, Thanks a lot for your in-depth explanation. It's crystal clear. The two alternatives you provided indeed fix the issue (both in the context of the demo and the website I'm working on). This sounds like a great fix. By the way, thanks a lot for everything you guys are doing. GreenSock products are GREAT, I really enjoy using them everyday ?

Maybe you clicked on a tab, which caused the window to resize and ScrollTrigger to refresh. Try opening the pen in a new window, and refresh the page if you don't see the glitch. Tested on Chrome, Safari and Firefox.

@ZachSaucier I finally managed to strip out everything that's useless! Well, it's not React ... it's GSAP. Check out the pen below. https://codepen.io/theophileavoyne/pen/XWNGyev Could it be a forgotten edge case?

Thanks @elegantseagulls. I'm not sure why you think the problem has anything to do with this. The ScrollTrigger never has to be killed (and never is) since there's only one page. Thanks @ZachSaucier. Believe me it hasn't. I added a console.log() after each ScrollTrigger in the CodeSandbox, so that you can see by yourself. But I agree, it's the only thing that could have explained what's happening (except for the part that sometimes it works like a charm). There's a race condition, but it seems not to be coming from my code!

Hello everyone, This is a reformulation of a topic that I created a few days ago. I am creating a new one here because I think it is more a ScrollTrigger+React-related problem and that it might benefit from being referenced as such. Context There are two consecutive "sections" that are both a 100vw/100vh. Each section is a React component (in the CodeSandbox below, they're called respectively WorkOverview and HomeAbout). They both get pinned one after the other. Problem The second element gets pinned too early, exactly as if the padding of the first section's .pin-spacer wasn't taken into account. The weirdest thing is that it doesn't happen all the time (but must of the time). Please note that (1) the ScrollTriggers are created in the order they happen on the page and that (2) it is not caused by any asynchronously-loaded content on what the sections' sizing might rely (images are inside a pre-sized container). Here's a video that illustrate the problem: Here's the CodeSandbox link https://codesandbox.io/s/clever-rhodes-16ic1. Note: if you don't see the problem, refresh the page 1 or 2 times. Thanks in advance for you precious help!

Thank you both. I will create a CodeSandbox and then I will start a new topic because I think it's more a React-related problem!

Thanks @akapowl, that helped! You're right!

Hello @ZachSaucier, thanks a lot for your help. However this is not the problem. I believe that it has something to do with the fact that, using pin: true, the padding that is added to the .pin-spacer is added asynchronously (like gsap.set() and setTimeout(fn, 0) do). I'm using ScrollTrigger inside of a React app. Both the sections I mentioned are independant React components. The two pieces of ScrollTrigger code run inside useLayoutEffect() hooks. The useLayoutEffect() hook garanties a synchronous execution of the code (which is what we need here I believe). However, because the padding is added asynchronously to the spacer, the second component (the glitchy section) ends up being mounted before the first one has received the necessary padding. Hence the second scrollTrigger instance receives an erroneous positioning information. My question is : GSAP, why not having the padding added synchronously to the spacer when the ScrollTrigger is instantiated? The only workaround I have is to use pinSpacing: false and to deal manually with adding the necessary spacing myself. However, I believe that I'm not the only one who could face such a situation.

Hello @tailbreezy, Thanks for your answer. anticipatePin doesn't seem to solve the issue. I usually do a minimal demo. However, because the error doesn't show up constantly, I struggle to identify the origin of the problem, which makes it hard to reproduce, hence the minimal demo would be ... the entire website. I did my best to provide as much info as I could. I'm not asking for a full fix of my code, but only for an idea/advice on where the problem might come from.

Hi guys, I'm facing a problem using ScrollTrigger. I have two consecutive "sections", that are both 100vh. They both have a ScrollTrigger instance attached to them and get pinned consecutively. The second section is supposed to get pinned when the first one gets unpinned. However, sometimes, the second section gets pinned before it's supposed to, thus appearing in the middle of the screen, with the first section behind it. I don't believe it is a spacing problem as, beside this, everything is laid out as expected. I recorded a video that illustrates the issue : Here's the link to the above website: https://black-jelly-portfolio-v2--gsapforum-jsy1cc20.web.app. The weirdest thing is that this behaviour is not observable all the time. If I refresh the page it disappears and comes back later. Any idea what's happening?

Hi guys, I built an animated carousel using ScrollTrigger. The ScrollTrigger instance that controls the overall animation uses pin: true and scrub: true. It is attached to a timeline that takes care of translating the images on the y-axis and scaling them based on their position. I needed to add a tween to each of the images to control their opacity based on their position. Because I don't want to have the scrub feature activated for these animations (otherwise I would have inserted them into the main timeline), I attached a new ScrollTrigger instance to each of them. Here's what it looks like: images.forEach((image, index) => { gsap.fromTo( image, { opacity: 0.2 }, { duration: 0.2, ease: 'none', opacity: 1, scrollTrigger: { end: `${index * 20}%+=1 top`, start: `${index * 20 - 20}% top`, toggleActions: 'play reverse play reverse', trigger: '.pin-spacer', }, }); }); But, because the main ScrollTrigger instance uses pin: true, you'll notice that I had to use .pin-spacer as the trigger of these ScrollTrigger instances. It works exactly as expected but it feels a bit odd to me. My question is, is this good practice? Should a ScrollTrigger instance rely on another one in such configuration? If not, what do you recommend me doing?

Hi Zach, Thanks a lot for your answer. It's super helpful, as always. I created a new pen with a more optimised version : https://codepen.io/theophileavoyne/pen/poNVyzE Is this what you had in mind?

Thanks for responding, Zach. Ok, I understand now. I'm so used to .set()that I forgot 'scale' was a convenience. I ended up doing this (which is equivalent to what you suggested): gsap.utils.pipe( (val) => ({ scaleX: val, scaleY: val }), gsap.quickSetter(image, 'css'), ); Thanks again!

Hello there, I'm getting some trouble using quickSetter to set the css transform (scale) property of an element. The only way I found to make it work is this: gsap.utils.pipe( (val) => `transform: scale(${val})`, gsap.quickSetter(image, 'style'), ); However, it isn't ideal since it entirely replaces the existing style property of the element. What I've tried: gsap.utils.pipe( (val) => `scale(${val})`, gsap.quickSetter(image, 'transform'), ); gsap.quickSetter(image, 'scale'); Both give me the same error in the console : Failed to execute 'setAttribute' on 'Element': 'x,y,z,scale,scaleX,scaleY,xPercent,yPercent,rotation,rotationX,rotationY,skewX,skewY' is not a valid attribute name. Any suggestion?