Search the Community

Hi, I've been reading the docs/tutorials on scrollTrigger, but for the life of me I still can't get control around the spacing added when you add a pinned element. I get the concept that scrollTrigger adds extra space for the pinned elements, but I'm trying to create a site with pinned elements and I'm struggling to have items positioned correctly. In my codepen example I have 2 'motif' elements and 2 'circle' elements. The circle elements are both pinned but are pulling the second motif animation markers up causing it to animate to early. You'll see in the code pen I've added the markers, so you can clearly see the 2nd 'motif' element markers are out of place, instead of inline with the 'motif' element, and I've also added a background color to the pin-spacer to try and visualise the extra space. I'd like both 'motif ' elements to behave as the first one is. Any help would be really appreciated and any explanation on where I'm going wrong too. Thanks in advance.

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!

Hi, I’ve attached a demo of the .pin-spacer causing a jump animation on mobile when i scroll upward on mobile devices. It works smoothly on desktop. iOS Safari has a feature that results in window.innerHeight providing different values based on whether or not the URL control and menu bar are expanded. Link to Demo codesandbox.io I didn’t use codepen because it puts the demo in an iframe. It wouldn’t be able to reproduce the bug on mobile. Link to Video iOS Bug In the video, you can see the inline height and padding styles of the .pin-spacer are changing based on the direction I'm scrolling. How to Reproduce Go to my demo on an iOS device or the simulator on a mac Scroll down a bit, stop, and then scroll a little in the opposite direction to allow the navigation to reappear. Device - iPhone 12 Pro running iOS 15.4 What I’ve Tried: I’ve tried updating the .pin-spacer height and padding within the onUpdate method of the ScrollTrigger, but GSAP library still fires its sendResize function. I’ve also read these threads that said this issue is caused by rendering and the main thread being handled differently on mobile - but I think its caused by the safe area. Layered Pinning Bug Pin Spacer Height on Mobile ScrollTrigger Jumping Assumption In the GSAP codebase, the functions below are fired when the inline styles of the .pin-spacer are updated. The navigation/menu expanding because of scrolling on iOS could be causing a browser event that is continuously firing getDocumentHeight() - which will update the .pin-spacer with the wrong values. function getDocumentHeight() { const { body } = document; const html = document.documentElement; return Math.max(body.scrollHeight, body.offsetHeight, html.offsetHeight); } function sendResize() { const height = getDocumentHeight(); if (lastHeight !== height) { dispatch({ type: 'resize', height }); } lastHeight = height; } function initializeDOMMutationListener() { if ( typeof window === 'undefined' || typeof window.MutationObserver !== 'function' ) { return; } // Listen on document body for any change that could trigger a resize of the content // When a change is found, the sendResize function will determine if a message is dispatched const observer = new MutationObserver(sendResize); observer.observe(document, { attributes: true, childList: true, subtree: true, }); window.addEventListener('unload', () => { observer.disconnect(); }); } Any help would be greatly appreciated!

I already posted a similar problem, but I later realised that the solution I received was not wo sufficient: I have two scroll animations after each other. The Pin-Spacer of the first animation overlays the a tags at a certain scroll position and so there unclickable because they're overlayed by the pin-spacer. Is there any way I can make the a tags clickable? Mabe make the pin-spacer layer not blocking or something else. (if I enable pin Spacing the a tag gets clickable but then there's a huge white space between the two animations.) Thank you for your answers!

I hava two scroll animations after each other. The a tag of the first animation is unclickable because it is overlayed by the pin-spacer of the second animation. Is there any way I can make the a tag clickable?. (if I enable pin Spacing the a tag gets clickable but then there's a huge white space between the two animations. Any help or comment highly appreciated!

Hey, step by step, I figure out, how this fantastic plugin works, but there is one thing, I'm not understanding: The goal is, to make two different instances, which means, when the viewport is wider than 992px, it should load the instance for big screens. When it comes to smaller viewports (on resize), it should kill the actual instance and init a new one for smaller Screens. And that works perfectly with kill(), clearProps and then new init. But it works only on resize, when my scroll position is within the start and endpoint of the first screen instance (isActive). For example, I am on a big screen, scroll down for a while, after showing up my animation, I decide to change the screen size under 992px width. In that case, I get a blank viewport (the white pin-spacer gets visible). Any idea, how to solve this issue? You can see this behavior in the codepen demo. Just resize the demo at the start position and after, at the end of the page. You can see a different behavior. Thank you very much for your support!!!