amitr95

@mvaneijgen - Haha, I guess that module is really popular 😂 Thanks for bringing that to my attention I have tried to emulate the demo provided in that answer, however, I'm receiving differing results. The cards on my demo do not stack and they blink out when scrolling? I'm also unsure on what's creating the huge space between text to the cards. https://codepen.io/amit_rai95/pen/ZExjMYX

I'm trying to mimic the an effect where cards unstack on scroll. For visuals, please click here to view a GIF of the effect. The website the above GIF is from is this website. Now, I've tried to mimic the above using GSAP / ScrollTrigger. However, my effect differs in the following aspects: The cards stack on top of each other in my demo, but reveal themselves in the demo I'm trying to mimic (see image of the design I'm trying to achieve here). I've tried z-indexing but this didn't do the trick. The cards pin to the top of the page, whereas I'm looking for it to be centered. It doesn't unpin when you've passed .cardStacking (carries on until the end of the page) Please view demo on 1200px + width.

I'm trying to achieve the following flow with my linked demo: User scrolls past .configurator and the section pins Then, when the user tries to scroll down #configurator-pin pins and moves up and down as the user scrolls (like position: sticky) And then the content in #configurator-freeroam scrolls as standard The answer by akapowl in this thread is sort of what I'm after. However in my demo, I'm trying to make the .configurator pin (which includes the header) and then pin the left and right sections. My left and right sections looks to be working fine, but I cannot get the header in the pin, even though I've defined trigger: container.

@SteveS - CodeSandbox link here Can you provide an example of this Tween approach? I don't see this in the GSAP demo? https://codepen.io/GreenSock/pen/YzygYvM

Hi @SteveS, @GreenSock, Thanks for the above feedback. I have simplified my JS to remove the animation - See JSFiddle here - Again, apologies, I cannot create a Codepen because it says my pen exceeds the 1MB limit, which is caused by the SVG (that is essential to my issue). I've seen demo's which showcase how to scroll horizontally using multiple elements (for example, scroll every .panel element. However, I'm just trying to scroll horizontally on my single svg graphic. This is where I'm struggling. In my fiddle demo above, you can see the delay in making the scroll start. JS: $(function() { let container = document.querySelector(".horizontalScroller__items"); let svg = document.querySelector(".horizontalScroller__items svg"); gsap.to(container, { ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, scrub: 0.2, invalidateOnRefresh: true, refreshPriority: 1, // end: '+=445%', // this decides speed of shift (not how much it scrolls by) end: () => "+=" + window.innerWidth, markers: true, onUpdate: (self) => { let p = self.progress; if (p > 0.23) { let scrollPercent = (1 - window.innerWidth / svg.scrollWidth) * 100; let shift = ((p - 0.22) * scrollPercent) / 0.7; if($(window).width() < 768){ shift = ((p - 0.22) * scrollPercent) / 0.79; } gsap.to(svg, { xPercent: -shift }); } } } }); // refresh scrolltrigger once var toggleScroll = false; $(window).one("scroll", checkToggleScroll); function checkToggleScroll(){ if ($('.horizontalScroller').isInViewport()) { ScrollTrigger.refresh(); toggleScroll = true; } if(!toggleScroll){ $(window).one("scroll", checkToggleScroll); } } });

I have a horizontal scroller block which takes a while to start moving. See the gif here (keep an eye on the right hand scroll bar): In the gif, you can see when my section pins, and then from the scrollbar, you can see I'm scrolling down. After about 7 scrolls down, that's when my content starts to scroll horizontally. Unsure what is causing this delay, but from a UX perspective, it's causing issues. Should ideally start scrolling horizontally as soon as the section pins. I cannot create a codepen of my issue (as my pen exceeds the 1mb limit), but see here for a JSFiddle, code below also. $(function() { let container = document.querySelector(".horizontalScroller__items"); let elements = gsap.utils.toArray(document.querySelectorAll(".animate")); let intro = document.querySelector(".horizontalScroller__intro"); let svg = document.querySelector(".horizontalScroller__items svg"); let animDone = false; gsap.to(container, { ease: "none", scrollTrigger: { trigger: ".horizontalScroller", pin: ".horizontalScroller", anticipatePin: 1, // scrub: 0.2, invalidateOnRefresh: true, refreshPriority: 1, end: '+=445%', // this decides speed of shift (not how much it scrolls by) markers: true, onEnter: (self) => { moveAnimate(); }, onLeaveBack: (self) => { resetAnimate(); }, onUpdate: (self) => { let p = self.progress; if (p <= 0.25) { animDone = false; } if (p > 0.23) { console.log(p); moveAnimate(); // this controls how much it scrolls // we do not want to shift the svg by 100% to left // want to shift it only by 100% - browser width let scrollPercent = (1 - window.innerWidth / svg.scrollWidth) * 100; let shift = ((p - 0.22) * scrollPercent) / 0.7; if($(window).width() < 768){ shift = ((p - 0.22) * scrollPercent) / 0.79; } gsap.to(svg, { xPercent: -shift }); } } } }); function resetAnimate() { gsap.set(".animate", { y: 150, opacity: 0 }); } resetAnimate(); function moveAnimate() { for (let e of elements) { if (ScrollTrigger.isInViewport(e, 0.2, true)){ gsap.to(e, { y: 0, opacity: 1, duration: 1.5 }); } } } // refresh scrolltrigger once var toggleScroll = false; $(window).one("scroll", checkToggleScroll); function checkToggleScroll(){ if ($('.horizontalScroller').isInViewport()) { ScrollTrigger.refresh(); toggleScroll = true; } if(!toggleScroll){ $(window).one("scroll", checkToggleScroll); } } }); @media (max-width: 576px) { :root { scroll-behavior: unset !important; } } .spacer { background-color: black; height: 1000px; } .horizontalScroller { padding: 100px 0 60px 0; height: 100vh; position: relative; overflow: hidden; z-index: 1; } @media (min-width: 768px) { .horizontalScroller { padding: 140px 0 80px 0; } } @media (min-width: 1200px) { .horizontalScroller { padding: 114px 0 80px 0; } } .horizontalScroller__intro { margin-bottom: 90px; } .horizontalScroller__header { margin-bottom: 17px; } .horizontalScroller__scroll { position: absolute; overflow: hidden; top: 0; } .horizontalScroller__items { position: relative; height: 100vh; width: 100%; } .horizontalScroller__items svg { height: 100%; width: auto; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <div class="spacer"></div> <section class="horizontalScroller"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-10 "> <div class="horizontalScroller__intro text-center"> <h2 class="horizontalScroller__header">Header</h2> <p class="horizontalScroller__standfirst">Test</p> </div> </div> </div> </div> <div class="horizontalScroller__scroll"> <div class="horizontalScroller__items"> <!-- large svg code here, see jsfiddle --> </div> </div> </section> <div class="spacer"></div>