Search the Community

I've started using gsap about a month or so ago in a nextJs project. It is phenomenal and I'm really enjoying using it, but I have hit a wall when trying to make certain overlapping animations. Here's what I want: - I have 4 containers. A, B C and D. - step 1: Container A is pinned and some animations run inside it. - Step 2: When A's pin is done, B is pinned behind it and is revealed when scrolling down (A goes up and we find B pinned underneath). - When A is out of the view, do some animations inside B, when they're done B is unpinned and by scrolling down C is revealed (kinda like the opposite of step 1) - Step 3: repeat step 1 Each container is its own component. I have done some research and found some threads that suggest putting the containers in an gsap.utils.toArray but I didn't think that would give me the effect I want. Please correct me if I'm wrong. I have made a simple demo that's a bit close to what I want. In the demo A is pinned, but when the pin is done B pushes A up. I managed to make the 2nd step work (B is pinned and when it's unpinned C is revealed) I have been trying to solve this for about a week now without proper results, your help would be much appreciated.

Can anyone help me? It's been a 3 days and I can't solve it. I have some problem with my divs, its goes to bottom maybe 50px for no reason. The first image is before I apply my GSAP, and the second one is after I apply my GSAP. Also there is my Codepen, thankyou

Hey guys I have created a scrolltrigger animation for my website using GSAP. Everything is working fine except for in iOS. I have tried ScrollTrigger.normalise(true), force3D: false, will-change: translate based on various answers from @Cassie and other possible fixes but still no luck. can you please suggest any changes. Also when I tried to use ScrollTrigger.normalize(true) the entire browser got messed up and scroll trigger animation were extensively flickering and not moving forward. https://www.aestriks.com/

Hi guys, I’m fairly new to GSAP and could use some guidance on this animation. My goal is to have the hero image smoothly scale up while keeping the title fixed in place until the image reaches 40px below the title, at which point the title should scroll. Here’s the code: StackBlitz Link https://stackblitz.com/edit/stackblitz-starters-ypnbty?file=app%2Fpage.tsx,components%2FHeroSection%2Findex.tsx,components%2FHeroSection%2FHeroSection.css,app%2Flayout.tsx For reference, I’ve marked the viewport area with a light pink overlay in the design. Thanks for any tips or feedback!

Hello Guys, first of all thanks for being always there. I again got a small issue where I am stuck, your help is really appreciated. I am using scrollTrigger with pinning an element where there are some animation with timeline that images appear and fade and lastly it ends but while ending the animation gets jerked. I am not be able to share full code and can't make a small chunk, can you tell me why the pin jerks at few places and otherwise works fine. I can share url in DM. Thanks

I couldn't figure out how to change the height of the parent element when changing the height of a child element in a pinned element. When you change the height of .middle, .bottom gets cut off. I would appreciate your advice. * Environment - Google Chrome 130.0.6723.92（Official Build） - [email protected] https://codepen.io/name-the-sans/pen/dyxmoNz

Hello guys, here what im trying to achieve is when scrolling the background color have to be change like in the demo, but the text reveal animation timing is bit off, i tried to make timeline but still its not working as expected, when the background color changes from white to black its needs to fill the full viewport height and only after that the text animation to be stated, and when its fully revealed the .wapper class animation needs to be fill the screen, which is coming from behind the revealed text . the timeline is not working also tried "pin" on the .three section. if someone can help it will be extremely helpful

Hey all. I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options. What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother. When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height. On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well. It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of the section. I am 'guessing' that it could be done using gsap.utils.toArray for both the sections and sidescroll slides/subsections and I have tried to get it as far as I could but I know to the right person, it's probably pretty straight forward. Any assistance or insight would be great. I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well. Thanks in advance. Cheers Murray

how to create this pinning effect the same as this website https://www.airvoir.com/

Hi everyone, I'm working on a project where I'm trying to pin a title during horizontal scrolling. I've successfully implemented vertical scrolling with ScrollTrigger and pin:true, but I can't seem to figure out how to achieve the same for horizontal scrolling. I've provided a link to a StackBlitz project where you can see my working vertical scroll example, but the horizontal one isn't functioning as expected. Any help or suggestions on how to make this work would be greatly appreciated! StackBlitz Demo Link: https://stackblitz.com/edit/stackblitz-starters-zxxdmi?file=app%2Fpage.jsx Thanks so much for your time and assistance!

Hi all! I have a block with pin but it stops too late How can i make it to stop on the end of parent block and how to keep that block always center https://codepen.io/Dima34_1/pen/WNVbMMY

Hello, everyone! bug report: https://www.loom.com/share/d9ba05f15f274e5893dd3be508b4a41f?sid=2128eeae-0637-4ea2-8156-a1f661973e04 I'm experiencing an issue where a pinned scene disappears at the very end of the scroll on Firefox (you can see it here: https://bonodigital.webflow.io/). This problem does not occur in other browsers. After some testing, I found that the issue is related to the pinType: "fixed". When I change it to transform or absolute, the scene doesn’t disappear, but it causes significant jitter (as shown here: https://bonodigital-008304f56e81b619aff969180bc.webflow.io/home-copy). Additionally, when I use pinReparent: true, the scene doesn't disappear, but because it moves within the DOM structure, the sticky overlay effect no longer works properly. no idea how to fix this?

Hi Everyone, I'm running into an issue with an overlay panel in a demo I've created. When you scroll down to the overlay-panel, the trigger starts as expected. However, I'm trying to translate a child element by -100%, but the animation doesn't behave as it should. Although I've set the end value to "bottom top," the animation seems to lag behind the overlay panel. I've experimented with viewport height, dynamic values, and fixed values, but I can't get the timeline and the overlay to sync up properly. Since I have scrub enabled, the animation should take the defined time to move from point A to B, but it’s moving much faster than expected. Does anyone have any ideas on how to fix this or what might be going wrong? Here is quick loom of the issue: https://www.loom.com/share/2163b75d6aed464f997fe9bb17cc5781?sid=416f5ae5-3491-459e-aa77-544356d6fbac CodePen Link: https://codepen.io/kamranimtiaaz/pen/KKjOzeg Thanks, Kamran

Hey GSAP community! 👋 I'm stuck in below issue, can anyone help me find solution? I'm using scrolltrigger to animate lottie file from frameA to frameB and pinning that section for animation view. so normally it works fine but as soon as we resize the window it is overlapping with first section. even though i have added : invalidateOnRefresh: true, and window.addEventListener("resize", () => ScrollTrigger.refresh()); Link below : https://codesandbox.io/p/sandbox/skp8vx This is the link and in there you can check the dist/wholesalers.html file for preview same file in full window or is codesandbox : https://skp8vx.csb.app/dist/wholesalers.html Please help me find the issue and solution.

Hi ! I'm trying to work around the "Layered pinning" demos, to make it work with sections of 50 viewport width. I made 4 sections. Each is divided in two blocks of 50 viewport. Left and right blocks from the first section have a background color and a text. The next 3 sections only have a background color and a text for the right block, leaving the left block empty and transparent. What I'm expecting is that the left block of the first section doesn't move up and is always visible, as the right blocks overlap. I'm struggling to understand how to make it work. Kind regards.

When I scroll the page on Safari iOS I can see a jitter on the page. Not in the animation but the overall page -- the text, etc. I understand that Safari handles scroll differently, but I'm not sure if there's something else I can do to stop it. When I comment out the JavaScript and scroll the page the jitter goes away.

I don't want it to execute just once, I want the pin to respond every time onEnter. The display shakes when onEnterBack is used. I want to fix this so that the screen doesn't shake when onEnter.

I used the Pin with ScrollTrigger using GSAP and NextJS; it works fine, but only when reloading the page. If I navigate to some other page and then come back, it isn’t working. Can anyone help me with this? I have been stuck here for days. I have tried to ensure ScrollTrigger is Re-initialized and Kill Existing ScrollTriggers. Still not working. "use client"; import { useEffect } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } const useGsap = (sections: React.RefObject<HTMLDivElement[]>) => { useEffect(() => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()); const triggers = sections.current?.map((section) => { if (section) { return ScrollTrigger.create({ trigger: section, start: "top top", end: () => `+=${section.offsetHeight}`, pin: true, pinSpacing: false, scrub: 1, onEnter: () => gsap.to(section, { y: 16, duration: 0.2 }), onLeaveBack: () => gsap.to(section, { y: 0, duration: 0.5 }), onLeave: () => gsap.to(section, { y: 0, duration: 0.5 }), }); } return null; }); return () => { triggers?.forEach((trigger) => trigger?.kill()); }; }, [sections]); }; export default useGsap;

Hello Guys, iam trying to recreate this scroll animation https://lulufinserv.com/products/gold-loan/ on this section "10 Reasons that prove LuLu Gold Loans", i tried creating it https://codepen.io/Rare4pple/pen/BagJrNv . but im stuck

Hello, everyone. I'm new to GSAP, so I'm sorry if I'm asking a dumb question. I've been trying to solve it for 3 days now. I couldn't find the answer in the documentation, I looked through a bunch of examples, read a lot of answers on the forum. As you can see from the pen, I have 3 sections. In the first one, I have implemented the animation of the div.box from the bottom center to the center right while the user scrolls. The section is pinned until the animation ends with a small gap. After that, the page continues to scroll to the second section, which is also become pinned, until all the slides are shown. And as you can see, the div.box will scroll with the page after the animation is over (which it should do after the section is unpinned by default). But I would like the div.box from the first section to not move with the page when the user continues to scroll after the animation is over, but to stay in the same position until the second section covers it and becomes pinned. I tried creating separate scroll trigger and pin only the div.box (something like this): ScrollTrigger.create({ trigger: ".box", start: "center bottom", end: `+=${window.innerHeight * 2}`, pin: true, scrub: true, }); But the problem is that then the div.box becomes position: fixed and starts to overlap with the second section on scroll. I also tried setting pinType: "transform" instead of "fixed", but with this setting, the animation has some glitches related to the scrolling speed, I think. I will be very grateful for your help, if it is possible to implement it at all

Hello Everyone. I am new to GSAP and have been trying to work with scrollTrigger for a bit now and I am completely lost on this issue. I am using HTML, SCSS, and JS (As you can see from my codepen). What I am trying to do is fairly simple and I am surprised it is causing me this much pain but I simply want to pin the rebuilding_country once the top of the viewheight of the window hits the top of the .rebuilding_country div. I feel like my gsap scrollTrigger is correct and this may be purely a SCSS issue I am encountering as I am also new to that. However, when I comment out all of my scss it still has this same issue. It is especially bad on mobile. On desktop 1920 1080 it works pretty much as expected. So now that I have stated what I am trying to accomplish lets look at what's going wrong. For some reason as the screens get smaller the start of the pin trigger moves higher and higher even though when hovering over the divs with devtools the rebuilding_country div is still below all of the content that comes before it in the HTML structure. So why is the start marker near the top of the entire rebuilding section while my screen gets smaller is my issue and where I am lost. I hope this was clear and I want to reiterate I am using SCSS. Thanks in advance.

Hi, I have a problem with pinning mainly on mobile. It's similar on desktop, but I somehow managed it, but on mobile, by scrolling on the phone, my "end" moves even though the element is already on the "pin". The faster I scroll with my finger, the more my "end" goes up, as if it doesn't hold its position. This will be perfectly illustrated in the video below https://streamable.com/5tzbzq my simple piece of code, although I have already tried many solutions. With lenis, without lenis, etc.... scrollTrigger: { trigger: ".p-single-gallery", start: "top top", end: "bottom 50%", pin: true, scrub: false, markers: true, }

Hello there, I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled. Please, look at the example i have prepared. I've made a slider that work, but so many bugs there Could you please help me to find a better way to solve my problem?

Hi everyone, I'm working on a Next.js project using GSAP and ScrollTrigger for horizontal scrolling. At the end of the horizontal scroll, I want the last panel to split into left and right sections. The left section should pin while the right section scrolls vertically. CodePen Example : Horizontal Scroll Example StackBlitz Project : Pin Left Section and Scroll Right

Hello again guys, I am using a Lottie animation in my site, but I am having an issue while using it with scroll trigger the animation of moving that element and also playing the animation both are not working together. Here I am adding CodeSandbox URL for sample code. Your help is always appreciated. https://codesandbox.io/p/sandbox/react-tailwind-starter-forked-vtg6tq?layout=%7B%22sidebarPanel%22%3A%22EXPLORER%22%2C%22rootPanelGroup%22%3A%7B%22direction%22%3A%22horizontal%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22type%22%3A%22PANEL_GROUP%22%2C%22id%22%3A%22ROOT_LAYOUT%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22clxbdqk5z00063b6mjlbkp8o8%22%2C%22sizes%22%3A%5B100%2C0%5D%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22EDITOR%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22EDITOR%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22EDITOR%22%2C%22id%22%3A%22clxbdqk5z00023b6musdc5mfv%22%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22SHELLS%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22SHELLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22SHELLS%22%2C%22id%22%3A%22clxbdqk5z00033b6m21p0u6qg%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22DEVTOOLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22id%22%3A%22clxbdqk5z00053b6mrxrz1ogu%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%2C%22sizes%22%3A%5B50%2C50%5D%7D%2C%22tabbedPanels%22%3A%7B%22clxbdqk5z00023b6musdc5mfv%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clxbdqk5y00013b6mldsa1egk%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22FILE%22%2C%22filepath%22%3A%22%2FREADME.md%22%2C%22state%22%3A%22IDLE%22%7D%5D%2C%22id%22%3A%22clxbdqk5z00023b6musdc5mfv%22%2C%22activeTabId%22%3A%22clxbdqk5y00013b6mldsa1egk%22%7D%2C%22clxbdqk5z00053b6mrxrz1ogu%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clxbdqk5z00043b6m5ix72z55%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22UNASSIGNED_PORT%22%2C%22port%22%3A0%2C%22path%22%3A%22%2F%22%7D%5D%2C%22id%22%3A%22clxbdqk5z00053b6mrxrz1ogu%22%2C%22activeTabId%22%3A%22clxbdqk5z00043b6m5ix72z55%22%7D%2C%22clxbdqk5z00033b6m21p0u6qg%22%3A%7B%22tabs%22%3A%5B%5D%2C%22id%22%3A%22clxbdqk5z00033b6m21p0u6qg%22%7D%7D%2C%22showDevtools%22%3Atrue%2C%22showShells%22%3Afalse%2C%22showSidebar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D