Search the Community

Hi there, I am quite new to GSAP but I think I managed to create some nice animations and I am almost "there". The only thing that doesn't work for me is to set pins correctly using ScrollTrigger. I have created a demo here: https://codepen.io/henningtillmann/pen/wBvZGOm What you see: An SVG animation pinned in the container that has min-height: screen. I know that there is no scrolling as soon as the pin is active, so other the other sections (2b, 2c) are only visible after the animation is completed. What I'd like to achieve is that the animation plays in the background (three timelines) and the sections 2a, 2b, 2c are on top of them. If I just pin the SVG, then the scrolling doesn't match anymore. It's probably just a minor thing but I wasn't able to find a solution. Thank you in advance! Best, Henning PS: I have read the forum guidelines but the "conmon GSAP mistakes" and "common ScrollTrigger mistakes" links trigger a 404.

I have created the following GSAP part, and I made each section would be tiered and the sections appear as the page scrolls. I would like the next section (in this case “<div class=”CSS-slides“>”) to appear immediately after the fourth last slide, but the design is not what I want because of the blank space. (Sorry, there are some Japanese words and I made it only for desktop view so far, so it' s a little hard to look for you.) I guessed the cause would be related to "pin", but I need it to make my design so far. What is the cause of this and how can I fix the problem?

Hello, Im hoping to get some help with animation using scrollTrigger then move x and y + scale. I am trying to make the following animation (reading this after viewing codepen might make more sense): - once the green background element hits the top of the viewport (image should be fully centered when this happens) - Then as we scroll a set amount (currently 1700), i want it so that the icon (in the codepen it is a plus) is fully centered and covering the screen virtically (I also want this to work dynamically with different screen ratio). Imagine if the image + icon were equivalent to a screenshot of a chrome tab with a chrome extension, and we are trying to zoom into the chrome extension as we scroll. I am currently struggling to get this to work... The x axis (x movement) and scaling seems to work perfect, but the y axis (y movement) and scaling seems to be off... If anyone could point me to the right track or help me to get this work, i would really appreciate that. For reference, Ive attached what I am thinking of. Initial screen (right as the scrollTrigger starts): Final screen (right as scrollTrigger ends). Blue/purple box is the imaginary screen, and icon fills up the height of the screen fully. Codepen:

Good afternoon, this is my first post in the community, so I apologize in advance if I do anything wrong. I am having an issue with the "pin" attribute for ScrollTrigger animations, using Elementor Pro. I created an example to demonstrate it. I created 3 containers with 100vh, and in the central one, I added a text. The animation changes the text opacity from 20% to 100%, and keeps the container fixed during the animation. The start works fine, the animation is triggered, and the container stays pinned. However, when the animation ends, the container disappears, and after that, it appears from top to bottom, as if it teleports to the position it would be if it weren't pinned, then goes back to its pinned position. I’m not sure what could be causing this. I have more complex animations with horizontal scrolls, and this problem always happens when I set the animation to be pinned. https://r2u.io/text/ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".h2", { opacity: 0.2 }, { opacity: 1, scrollTrigger: { trigger: ".meuContainer", start: "top top", end: "+=100%", scrub: true, markers: true, pin: true } }); </script> output3020.mov

I dug into old topics and found some solutions but none of them worked or maybe I couldn't correctly try them so forgive me if I'm repeating an old question. I just want to implement a simple sticky inside its parent and though the element sticks to the correct position, the start seems wrong. The main problem is the end because the sticky element stops before it reaches the bottom of its parent.

Hi! I'm currently testing GSAP with Lenis but this seems to be mostly a GSAP + ScrollTrigger issue. I'm trying to figure the best way to pin the second section (red background) before you proceed scrolling to the next section (white background). I wanted to add a "pause" before the user proceeds to scroll down past it / the section should be pinned until the gsap timeline finishes.

Hello everyone, I am trying to solve a problem of synchronizing a section (pinned with scrollTrigger) with a certain amount of scroll until I reach the end of the scrollTrigger. Basically I have a counter that is inside my pinned section. Once it is pinned I have a Gsap Observer that animates my counter from counterSequence[n] to counterSequence[n+1] (this is obviously for an imageSequence animation). That means each time I scroll inside my pinned Section, I activate an animation of my counter... until I reach the end of my counterSequence (meaning my last frame on my real project). The problem is that scrollTrigger only allows to specify a start and end of the section and I don't know how to synchronize it with my number of scrolls until I finish all my counter Sequences (for now I did end: "+=800%" so that I am sure I have enough space to scroll to get all my counter sequences). Do you have any idea of the direction I should take ? (No need to spend too much time on my codepen just any idea ^^) Thank you !

Hello, I'm new to GSAP and I wanted to use ScrollTrigger on my website. I just don't understand why pinning does not work well in my case, and I tried to make a good copy of my problem on codepen. The behavior I'm trying to achieve is that for the first 300px of scrolling the nav bar stays pinned, the rest of the page scrolls away and after 300px (where the animation ends and opacity is 0.5) the nav bar also scrolls away. I would be grateful for any solution that would make this work with mu previous fade in animation.

Hey, everybody. I am developing wordpress themes. In many projects I use GSAP animations. In large multi-page sites I face the problem of poor performance of GSAP scrolltriger property pin. Probably I am lacking experience to optimize it. Perhaps someone can share his experience how to better optimize animations in such projects (in the context of Wordpress and in general)? Perhaps it makes sense to separate all pages by block and load js-code animations only when there is a block? Thanks for any information PS. To understand the Wordpress problem I will add. That in most sites I create my custom theme from scratch. Pages are separated by blocks. These blocks work with the help of ACF Gutenberg plugin.

Hi all, in my project where I instantiate lenis in a container and not in the body as by default, when I resize the window it seems that scrolltrigger is unable to calculate the new start & end correctly, did I do something wrong in the scrollerProxy configuration?

Hi! I hope you're doing great. I'm facing some issues with the code. First of all, I couldn't figure out how to use the pin feature because I've mostly used GSAP with plain HTML, CSS, and JavaScript. Secondly, I couldn't understand the strange behavior of the animation. When I enter the start marker, the content disappears. However, the animation triggered by ScrollTrigger runs smoothly when I exit and re-enter through the end marker. import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import pakistanMap from "./assets/pakistanMap.svg"; import worldMap from "./assets/worldMap.svg"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Extra = () => { const worldRef = useRef(null); const pkRef = useRef(null); const containerRef = useRef(null); useEffect(() => { gsap.to(worldRef.current, { scale: 0.1, opacity: 0, duration: 4, scrollTrigger: { trigger: containerRef.current, start: "top 30%", end: "bottom 30%", markers: { start: "start", end: "end", }, scrub: 1, // pin: true, // pin: worldRef.current, // pin: containerRef.current, }, }); }, []); return ( <main className="w-full overflow-x-hidden"> <header className="w-screen h-[70vh] bg-gray-800"></header> <section ref={containerRef} className="container flex flex-col gap-4 items-center justify-center bg-white" > {/* World Map */} <div ref={worldRef} className=" w-[500px] h-auto bg-black/20 z-20"> <img className="w-full h-full object-contain" src={worldMap} alt="World Map" /> </div> {/* Pakistan Map */} <div ref={pkRef} className=" w-[500px] h-auto bg-green-100"> <img className="w-full h-full object-contain" src={pakistanMap} alt="Pakistan Map" /> </div> </section> <footer className="w-screen h-[80vh] bg-gray-800"></footer> </main> ); }; export default Extra;

Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases. Then, when the user scrolls to the section with the slider, by default these slides are transparent. As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider. I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance! That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed. Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider) Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.

hello, I have a problem with a scroll trigger with a pin for two sections, the goal is to pin the first one, scroll to pin the second, and scroll to the bottom of the page. I tried a lot of different things, with anticipate pin, trigger, and change the start and end of the trigger, but nothing looks ok, a little 'jump' appears between the different pin. Actually, the trigger is on the parent of the 2 sections , and in the same timeline, but i don't know how to fix it.. I attached a video and the code i used. Thanks for the response :) Enregistrement de l’écran 2025-01-03 à 14.mp4

I’m trying to set up an animation for a pinned container. Everything seems to work, but I can’t figure out why I need to set the section height to 100vh more than the height of all the scrollable elements combined. Am I doing something wrong? https://codepen.io/mikhail21990/pen/LEPyrjO

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