Search the Community

i wanna pin parent div and slide up div child. Everything was going well until a added ScrollSmoother and parent div end pin when last slide not moving up done. Can u guys support me? here its my code without ScrollSmoother https://codepen.io/manhnguyenn/pen/vYVqqPa and one more thing if u guys can help me edit the speed for every slide equal. Thanks a lot for your help

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.

Hi everyone, I'm working on a unique navigation implementation and could use some guidance. Here's what I'm trying to achieve: - The navigation items are represented by large vertical bars that correspond to specific sections on the page. - As the user scrolls and a vertical bar reaches the left side of the screen, it becomes the "current" vertical bar and remains fixed in place. In my initial attempt, I used a section title as the vertical bar. However, as you can see in the Codepen, I need to have two or more bars anchored to the right side of the screen, moving in sync with their respective sections. I've added some comments in the Codepen link to explain my thought process, but I'm currently struggling to understand why the bars aren't moving as expected I'm open to suggestions and willing to change the structure I've created if anyone has a better solution to achieve this effect ✨ Thank you all in advance for your help!

Hello there, I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here. Anyway I'm opened to suggestions, thanks for your help folks Olivier

Hello, I'm exploring the examples but I can't find what I'm looking for, and I want to see if it's possible to do it. I'm looking to have some cards move horizontally with a parallax effect when scrolling, but I want them to stay centered, and the next card should appear on top of the previous one. I don't want them to push each other like a slider. When reaching the last card, there should be 5 cards stacked on top of each other in the middle, and then the vertical scrolling of the site should continue to work. This website has it, but cards with vertical scroll https://quipo-app.com/

hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js

Hey there! I hope I can find an expert who can help me out. I want to add ScrollTrigger and SplitText to my NextJS project. Inside of this project I'm using the new "App-Router". With that said, the problem occurs. The previous "_layout.js" file is now "layout.js". So to register PlugIns only once, I tried to import ScrollTrigger & Splittext like so: import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' // & gsap/ScrollTrigger doesn't work too import { SplitText } from 'gsap/dist/SplitText' // & gsap/SplitText doesn't work too gsap.registerPlugin(ScrollTrigger, SplitText) This works fine at the first glance. Now I want to setup a Provider which provides all the scroll-animations. When I want to access ScrollTrigger or SplitText it "missing plugin"... so it isn't global.. But when I want to import & register the plugins into my provider I get this error on every page-reload. Sooo I don't know what I can do. Hope somebody of you knows how to solve this problem. Or how to use the plugins probably with React in generall.. And I also have to mention, that those error only appear when is add the code gsap.registerPlugin(ScrollTrigger, SplitText) to the page..

Hello, I am completely new to gsap and I saw an effect in a site where cards were stacked horizontally and there was a spacer for cards so that they don't overlap with each other completely, I tried looking online and went through many docs, and articles but couldn't achieve it. the thing in the image is what I am trying to achieve, I am here right now https://codepen.io/rahul-krosuri-au6/pen/jOeJyvw

On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning

Hi, I am trying to get my website to work smoothly with Scroll Trigger. But the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. I tried searching for solutions but to no avail - might be my lack of knowledge of css. Here is my website (try it on mobile to understand what I mean): https://tbdalen.github.io/ And here is my repo: https://github.com/tbdalen/tbdalen.github.io Here is my inspiration for this site and they managed to prevent hiding the address bar. They have used hammerjs here though: https://dpotferstudio.com/

Hey guys! First thanks for your amazing work I'm currently working on a project which is kind of a scrollytelling website, done with React+NextJS and I decided to go with GSAP for the animations. I'm not sure if I missed that in the docs, but I currently struggle with a problem that feels quite basic. I'm building different components to reuse and one of them is a "FadeInOut" wrapper-component, that should fade in its children when scrolling in view and fading out when leaving. The problem appears as soon as I want to add different data-speeds in addition (Tried it on triggered element itself and child). Seems like the start/end positions of the fade scrollTrigger are not taking in account the offset of data-speed...or somehow get calculated wrong. What am I missing? Thanks in advance!

Hey Everyone, Been scrathcing my head over this one and simply can't figure out how to implement ScrollTrigger rfresh(); to recalculate % start and end values on screen resize. So in my demo there are two elements which on scroll reduce their widths from 50% - 0% in the left and right direction, Imagine two curtains opening. Upon load, and with screen resize the two curtains both take up 50% of the viewport no problem, but if I resize after engaging the scrollTrigger the intial values of the 50% are remaining and the "curtains" overlap each other. As can be seen when scrolling and then resizing in the demo. I believed this to be a simple fix with ScrollTrigger.refresh(); to recalculate but I feel like I'm missing something super obvious! Sorry for the silly question I've been wracking my head over this one and have been staring at the screen for hours lol 😛

Hi there, I am using ScrollTrigger a lot, its a fantastic addition! the only issue I've run into so far is cleaning up when using ScrollTrigger.matchMedia() when un-mounting in my React components. I've tried killing all ScrollTrigger instances, and killing timelines individually. simplified setup below: const buildTimeline = () => { // ... setup stuff ScrollTrigger.saveStyles([boxRef.current, mobileRef.current]); ScrollTrigger.matchMedia({ '(min-width: 720px)': () => { if (!boxRef.current) { console.log('boxRef does not exist'); } ScrollTrigger.create({ // config stuff animation: desktopTimeline.current .to( // animations ) }); }, '(max-width: 719px)': () => { if (!mobileRef.current) { console.log('mobileRef does not exist'); } ScrollTrigger.create({ // config stuff animation: mobileTimeline.current .to( // animations ) }); }, }); } useEffect(() => { if (!hasMounted.current) { hasMounted.current = true; buildTimeline(); } return () => { // kill all ScrollTrigger[s] ScrollTrigger.getAll().forEach(t => t.kill()); // try killing individual timelines also mobileTimeline.current.kill(); desktopTimeline.current.kill(); } }, []); This would normally work ok on ScrollTrigger instances generally - or at least it seems to! - but if I'm using matchMedia I'll still get media query change events firing where the component is unmounted (i.e. navigating to a different route). any idea what I'm missing here?

Hi, so I have created multiple backgrounds which I would like to squeeze and expand as shown in my codepen example. However, trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 2) And also because I will be making quite a few of these backgrounds and repeating the squeeze and expand for each of them as shown in my Codepen, I'm wondering if there is a more effective way to do it rather than having one timeline for each background? I've noticed some lag when I have too many timelines, especially with the start position adding +=180% for each timeline... (by the 20th background the start is at +=3420%... ) I'm new to all of this so I apologise if any of my questions seem obvious. Any help is appreciated, thanks in advance!

Having some trouble getting a Scrolltrigger animation adapting to screen size changes. There are four icons equally spaced across the top of the page using flexbox, which are part of the site's nav. When the page loads, these icons start out scaled up and placed at four corners of the viewport. As the user scrolls down, each icon scales down and moves into place where flexbox has positioned them. This demo I've put together is only a part of the full animation (which also includes photos scrolling by), but is pretty much doing what it should...except that it breaks on viewport resize. I had originally built this with just Scrolltrigger and a regular GSAP timeline, but was struggling with getting the positioning right, due to needing the final position to be dictated by flexbox. So when I learned about Flip, it seemed like a good solution. And I think I'm on the right track, but willing to accept that I'm going about it all wrong. I've tried solutions like this one but just couldn't get it worked out. Appreciate any thoughts anyone has! -- Andrew PS: There is also an animatic that shows what the final animation should do, just to help visualize it.

Hello! I'm trying to animate a looping sprite sheet as I scroll through a section, using ScrollTrigger. Essentially, like this amazing example by Redis: https://www.redis.agency/. They seem to rely on Lottie, so perhaps using the Lottie Helper for ScrollTrigger would be a better solution? Here are some insights: My sheet is made of 60 frames, and I'm animating the background-position of my sprite element using ScrollTrigger, but would like to control the rest using CSS: position, size and style of the sprite I would love to have some form of control on how much scroll to do for one full completion of the sprite sheet, as the sections I'll be scrolling through can have very different heights I would like the sprite sheet to keep animating for as long as I can scroll within its parent element. The sprites are looping! Ideal solution would be being able to say that a full sprite completion should be X00 VH long and the animation should reset the background position every time it reaches this threshold, and to do so for as long as I can scroll in the parent. Say the parent element is 600vh and I declare a variable of 200vh for a full completion of my sprite sheet; the sprite should be able to loop three times within this parent. I'm very new to GSAP and have been loving the little things I've been able to do so far, but it's seems I've hit a wall and would appreciate any guidance Resources I have tried on the forum: Thank you!! #EDIT: here's an updated codepen where I got the looping part fixed, but the animation loop is way too fast and I can't seem to control that: https://codepen.io/thomasbosc/pen/oNadjRO

Please, I need some help. I am a beginner with gsap. I need to do an animation. I would like to move an image horizontally (from the start or middle of the window to the end ) and don´t overflow the window (sticky horizontal). Any help? Thanks in advance.

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

Ok, been iterating on this for a while, and I am pretty stuck. I know there is likely something simple I am missing. I have two `scrollTriggers`. One scrolls a container div horizontally, and another controls the animation of each section in the container. The Scrolltrigger works correctly. However, I'd like Draggable (on both the main container div.draggable and div.marker to update each section in the container. The closest I've gotten animated all .box at the same time instead of each as they progressed in the ScrollTrigger.

Hello, the animation is currently working how I want it to, but was wondering if there was a way so that each element on the left would snap to centered. The current way it is working is making it so that it snaps to the start or end of the container. Thanks for the help! Please note - I have just started learning GSAP. If there is a much better way to approach this animation, please let me know. Thanks!!!

Hi everyone, I'm using Lenis smoothscroll and I have lots of scrollTrigger timelines that are triggered with toggleAction and scrub. They work fine when I wheel scroll down my page but when I click on an anchor to immediately go to my section, previous timelines do not finish properly, I have styles that are not added/removed only on the ones triggered with toggleAction. I tried forcing the animations to the end like below, but that doesn't work. document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener('click', (e) => { e.preventDefault(); const href = anchor.getAttribute('href'); if (href === '#') { return; } window.lenis.scrollTo( href, { immediate: true, onComplete() { const scrollTriggers = ScrollTrigger.getAll(); scrollTriggers.forEach((st) => { if (st.animation) { st.animation.progress(1); } }); } } ); }); }); What am I doing wrong here ? Thanks for your help.

Hello, I have a problem with this code snippet, but only in Firefox. Chrome and IE work fine. I've already mentioned the problem in another thread, but I think that's a different topic and area, so i'll start this new thread. Unfortunately I cannot present a "normal" minimal demo, but i've created a codepen to illustrate the problem: https://codepen.io/design4u-koeln/full/xxyXOaO It's about the two areas with those gray bootstrap cards. CSS: .karteien, .karteien2 { height: 100vh; width: 400vw; display: flex; will-change: transform; } .karteien .gsapkarteiwrapper, .karteien2 .gsapkarteiwrapper { padding: 100px 0; height: 100%; width: 100vw; will-change: transform; } JS: const t1 = gsap.timeline(); t1.fromTo('.karteien .second', {x: '-100%', y: '+100%'}, {y: 0}) t1.fromTo('.karteien .third', {x: '-100%'}, {x: '-200%'}) t1.fromTo('.karteien .fourth', {x: '-400%'}, {x: '-300%'}) const t2 = gsap.timeline(); t2.fromTo('.karteien2 .second', {x: '-100%', y: '+100%'}, {y: 0}) t2.fromTo('.karteien2 .third', {x: '-100%'}, {x: '-200%'}) t2.fromTo('.karteien2 .fourth', {x: '-400%'}, {x: '-300%'}) ScrollTrigger.create({ animation: t1, trigger: '.karteien', start: 'top', end: 'bottom', scrub: true, pin: true, onToggle: self => console.log("toggled, isActive:", self.isActive) }); ScrollTrigger.create({ animation: t2, trigger: '.karteien2', start: 'top', end: 'bottom', scrub: true, pin: true, onToggle: self => console.log("toggled, isActive:", self.isActive) }); I added this here to illustrate. onToggle: self => console.log("toggled, isActive:", self.isActive) If you take a look at the pen with Chrome and Firefox, you'll see that Firefox is too late to start interacting with the element. If you click "F12", change viewport height or load the page for the second time, everything works perfectly in FF as well )) Sometimes the black footer moves up, sometimes not No matter what I do - unbind jquery, deploy window.load, or jquery document.ready, or even window.resizeTo("99.99%","99.99%"); 🤦‍♂️- it doesn't want to work properly in FF. Does anyone have an idea what could be causing this? Thanks!

I'm working on a prototype for a mobile-only website. The concept is, that there is an image with a route on it and the page scrolls along the specific route. The image with the route is larger than the screen and will be updated with x/y transforms to follow the route during the scroll. I've created a GSAP timeline with the different points on the route and synced it to a GSAP ScrollTrigger instance. The trigger ('.scroller'.) is an invisible div with a height of 2400vw, which solely functions as the scroll distance. The demo is visible on: https://scrolltrigger-test-ib0bhfhl2-tom51north.vercel.app/. The demo works smoothly on desktop (use the mobile debug tool). However, on iOS the whole animation is kind of buggy/laggy when you scroll down the page and I can't find out why. I also have added a FPS meter, but that also shows 60 fps. Does anyone have an idea why the whole animation is buggy and how I can fix it? const scrollTl = gsap.timeline({ scrollTrigger: { trigger: ".scroller", start: "top top", end: "bottom bottom", scrub: true } }); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-33vw', y: '-59vw', ease: 'none' }, 0); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '7vw', y: '-91vw', ease: 'none' }, 1); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '47vw', y: '-130vw', ease: 'none' }, 2); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-4vw', y: '-169vw', ease: 'none' }, 3); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-57vw', y: '-203vw', ease: 'none' }, 4); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-106vw', y: '-244vw', ease: 'none' }, 5); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-68vw', y: '-270vw', ease: 'none' }, 6); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-9vw', y: '-264vw', ease: 'none' }, 7); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '26vw', y: '-292vw', ease: 'none' }, 8); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '64vw', y: '-322vw', ease: 'none' }, 9); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '14vw', y: '-375vw', ease: 'none' }, 10); scrollTl.to('.scrolltrigger-test__visual-background', { duration: 1, x: '-38vw', y: '-410vw', ease: 'none' }, 11); .scrolltrigger-test { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: #008238; } .scrolltrigger-test__visual { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; } .scroller { position: absolute; top: 0; left: 0; width: 100%; height: 2400vw; } .scrolltrigger-test__visual-background { position: relative; } .scrolltrigger-test__visual-background-image { display: block; position: relative; width: 280vw; height: auto; top: -10vw; left: -72vw; }

Hi, I started using GSAP recently and I like this library but I stuck for now. I want to slide elements back to right side position after having already scrolled to the next vertical section. The idea is that there is no empty space left after horizontal scroll ends. I can use this approach to prevent it: x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px" but this is not exactly what I want, because if there are not many elements and they fit into the screen, it will just stand there until I scroll to the next section. Thanks for your help 🙏.

Hello all! I am a longtime greensock advocate (joined in 2009!) but come from the visual design side so most of my experience is providing devs with annotated mockups and assets to build. Long story short - I just want to learn to do these things better myself and with tools like Webflow the bar to entry has lowered drastically for designers like me to build really cool stuff on my own. So - I'm coming here as I start my journey into building a really exciting project and before I start mucking up the code with copy/paste stuff that's all over the internet I'd like to talk strategy. I hope to utilize gsap/scrolltrigger for many parts of the experience but the fundamental core concept I'd like to achieve is built around a single lottie animation that is pinned and played via scroll in three sequences (frame 0-50, 50-100, and 100-50) as the user traverses down the vertical page through various sections. I have scripted the sequence of animation here To start, I've found the scrollLottie plugin by Chris Gannon and subsequently the helper function made by Greensock. Seems like the native implementation is the ticket. Beginner questions: 1. Should this whole sequence be established via timeline structure? Do I initialize the LottieScrollTrigger inside the gsap.timeline? let tl = gsap.timeline({ scrollTrigger: { trigger: "#container-div", pin: true, start: "center center", end: "+=750", //should I set an endTrigger to reference when its time to pin at the top of section 2 and beyond? use duration instead? scrub: 2 } LottieScrollTrigger({ target: "#lottie-animation", path: "https://www.website.com/file.lottie", speed: "medium", scrub: 2 // seconds it takes for the playhead to "catch up" }); 2. Do I understand correctly that I should be pinning the container-div and animating the objects (lottie-animation, images) inside? 3. How do I build out a sequence of animations within this timeline structure, is it a new scrollTrigger element each time repeated as we go down the page? Understand this is both complicated and also really amateur hour but I am so grateful for the help. After this step I will be able to provide a minimal demo if I/when hit any snags!