Search the Community

I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.

I am trying to pin section when section reached top of the window in react but it's doesn't works! but also use same logic for html file it's works. Please help me find out my it's not working in react. react file link :-https://codesandbox.io/s/pin-using-gsap-in-react-imqkh9?file=/src/App.js:358-376 html file link: - https://codesandbox.io/s/cranky-darkness-le0ic1?file=/app.js

Hi, I'm currently working on an animated landing page based on scroll triggered animations. I have a 'hero section' which has elements animating within it (tree, decorations, etc), these need to animate while the 'hero section' remains pinned while the user scrolls to progress through the animations. My issue is that I cannot scroll when hovering over the hero section when it's pinned and for some reason the container is having "top: 172px" added to it. Somehow the scroll works well when scrolling on that additional grey area (which I don't intend to have as I want the hero section in full height), and the scroll on the hero section doesn't work. I tried adding "z-index: -1" to the hero section and started the pinning trigger at "start: top -20%" then it works as a workaround (source: "https://codepen.io/stevencamilleri-mrg/full/MWvXVNB"), however with that the button inside the content will not remain clickable anymore. Can anyone look into what I might be doing wrong? The idea is to have the user zoom in/out the tree with different content and decorations showing up. PS. I would suggest viewing in full view on Codepen in desktop

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 have a section middle of page and into this section i have inner scroll When user reached this section firstly pin the section until inner Scroll end then unpin the section on the parent scroll child scroll run until child scroll end.... Please i need help

I am working on a website that requires a grid of blog posts to be pinned whilst animating in. Once they have animated in the pin ends and another section needs to follow immediately, unfortunately there is a large amount of white space between these two sections. I have turned off pinSpacing but this has had no effect. I'm not sure what else to try at this point.

Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help