amitr95

I have a panel (.fixedPanel) which is "sticky" when the element his the top of the screen. This element contains a large block of content, and since it is essentially "fixed" to the top on scroll, it takes up a lot of real estate on the screen. To resolve this, once the element is sticky, I'm looking to reduce its body content height (.fixedPanel__body) to 0. Then to restore it's height when a user scrolls up - like in the GSAP demos. However, in my approach, the height is being adjusted even when I'm not scrolling, causing a glitchy effect visually. See GIF below. To clarify, when a user scrolls down, all content in.fixedPanel__body should be hidden, until they scroll up. Where am I going wrong?

@Rodrigo Are you suggesting something along the lines of: function openCurrent(){ TweenMax.from(answer, 0.5, { height: 0, immediateRender: false, ease: Back.easeOut }); console.log("click"); } TweenMax.delayedCall(0.5, openCurrent); ? Demo updated to showcase it effect: https://codepen.io/amit_rai95/pen/bGjQVWO?editors=1010

@Rodrigo I followed your approach and created a child element which housed the expandable content, however it yielded the same results. I then stripped it back to test if padding and margin was in fact the issue, by commenting out anything padding and margin related, however the issue still persists. I can't see what else would cause miscalculations besides padding, other than the JS? See demo here: https://codepen.io/amit_rai95/pen/dyjwjMM

Hi @Rodrigo, Many thanks for the demo with `Flip`. Regarding your first point, where content is being cut off due to "paddings and how the height", in the `Flip` demo, I can see the height is still being set with padding, but it doesn't cut off in that demo. Why is this? Are you suggesting with my approach, I should look to remove padding altogether?

In the demo, you will see an accordion which is showcasing 2 issues: When you click on "question 1", you will see that it shows all of the content (nothing is cut off). If you then click on "question 2", part of the answer is being cut off (see image below for context). Upon inspecting the code, it looks like it is setting a height lower than the content, unsure why? When you first open any accordion, it gives an unwanted "blink" effect. This only happens on first click of an accordion

I'm trying to add a class on scroll to make the header fixed. However, the class isn't being applied? I've seen existing posts on this, all which go about the same / similar way I have applied the snippet in my demo, but it doesn't work in my use case? https://ihatetomatoes.net/scrolltrigger-tutorial-toggleactions-toggleclass/

I'm trying to get a simple header animation working where, when a user scrolls, .header__topNav scrolls up off screen, making only the main nav visible (and moving the main nav up so that there's not huge space above once .header__topNav translates off screen. And then to bring it back when a user scrolls to the top of the page. I've seen the demos which showcase usage of yPercent on scroll, but it's not working as described above. In addition to this, why does the yPercent change initially on the demo? It should change on scroll only?

I have a section which contains stats that trigger the "count up" animation once it's in view. However, when you get to this section, it gives varying results. Sometimes it only counts the first card up and then the last 2, sometimes just the first card. I'm trying to trigger all of the cards to start counting up together. Any ideas why the varying results?

I have a module where 3 cards stack on top of each other and then, on scroll, the cards will unstack one by one. See GIF of desired effect here I have tried to emulate the above effect using GSAP and ScrollTrigger, however, my animation is yielding undesirable results. Issue(s) From the demo you can see that, as soon as the "scroller start" indicator scrolls to and past the "start" indicator, the cards disappear. Upon inspecting the code, for some reason, when the indicators pass, cardStacking__cards has a top value of top: -1334.52px, which I'm unsure why. The section does not pin when the cards are in view. I'm trying to pin the section until all cards are revealed, and then unpin. I have defined it to pin when cardStacking__cards is in view, but it doesn't pin The 3rd card is showing up as the top card, even though it has a negative z-index compared to card 1.

@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>