Search the Community

Hello there, I’m encountering an issue with the GSAP animation I’ve implemented, which you can review in the CodePen link. Overall, the animation works fine, but there is one problem: The logo follows us as we scroll downward (it's sticky) and shrinks to a certain point. During the shrinking (or enlarging when scrolling back up), the motion isn’t smooth. It produces small “jumps,” making the scaling appear uneven instead of fluid. This issue becomes even more noticeable when reducing the viewport width. Essentially, it looks as if the logo’s width decreases in steps (e.g., 200px → 198px → 196px → 194px, etc.) rather than in smaller increments that would make the scaling truly smooth. I’d greatly appreciate any suggestions on how to resolve this so that the resizing feels smooth and continuous. Additionally, any recommendations for improving or optimizing the JavaScript code used here would also be very welcome, so we can achieve the best possible overall result. Thanks

Hi I would like to create a section where I can scroll through cards (flexible heights, all larger than 100svh), which then stick to the bottom. I was able to build this already. But what I also would like to achieve is that the next sections should already be visible at the bottom, like stacked papers. See the sketch attached. Here is where I got stuck: https://codepen.io/Mirko-the-typescripter/pen/YPyMJvp

Hi there, i wanna replicate smooth scroll effect like just like in this website https://kprverse.com/. I have used scroll trigger but i never got the same effect. Can anyone give me advice what techiques can i use or what other thing can i use scroll trigger for smooth scroll

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

I 've been trying to solve this for days seeing the community and referring topics here in GSAP and tried various method but still could not solve this issue. As you can see from the code there are three div's and the second div has some content and I need to make one of the div's in it scroll horizontally while scrolling vertically. I have pinned the second div inorder to complete the horizontal scroll. It works sometime when I make corrections on the code and hit save. But when I refresh the page it stops working all the same. Also sometimes it works only when the cursor is on the left most side the horizontal scroll works. Any suggestions / help ? I have provided the codesandbox link for the same. https://codesandbox.io/p/sandbox/horizontal-scroll-q55rs3

hello guys, i was trying to creating a horizontal section scroll, but its move left to right, i want to move the opposite direction.i have tried many solution given by ai but still the same. here is the codepen code, if someone can help it will be amazing https://codepen.io/Rare4pple/pen/jORMQrM ,

I have a pinned section in my page, which makes the other Scroll triggers I have in different child components have their starting positions inaccurate. I tried refreshing the Scroll trigger(using ScrollTrigger.refresh()) in the main page(file) but the issue remained. Also I want to know if there is a way I can pass down an instance of Scroll trigger and Gsap to my other components, so If i refresh that one instance, it updates everywhere, or is there a better way to handle having multiple gsap and scroll triggers in different components but still being able to control them from the main page? Also I want to know if the better approach is to write all my animations in one useEffect with all the jsx in one page(file) or have some of the animations for different parts of the page as components which include their respective jsx. So pretty much everything in one page or components style ? I ask this because the component approach has been a headache for me, because one way or another the starting points end up inaccurate. I would apperciate if someone could help with a direction I could take. This is a simplified version https://stackblitz.com/edit/vite-react-tailwind-fpc1wz?file=src/App.jsx where I tried to refresh a child component but it didn't work

Hi Friends, im trying to achieve this simple effects using scroll pinning and scroll trigger. So based on my codepen i have a div which holds 5 sections which i want to animate. So for my first section, when top of the viewport touches the top of the section 1 it will pin that section then the .section-1-content-wrapper will animate from left to right (this one is working as expected) Then when i continue to scroll to section 2, when the viewport touches the top of section 2 it will pin that section then the .section-2-content-wrapper will animate from bottom to top (this one is working as expected) Then when it comes to section 3, this one however gave me a little issue, whereby the start of the animation cant seem to stay at the top of the section 3, it will continue to move up and stick so near to the end of section 2 animation as i scroll down which is not what i want, i want it to stay at the top of the following section. Like the one when i scroll from section 1 to 2, the start of the animation will stick to the top of the following section. Basically aside from section 1 , i want the animation to be similar to section 2 which is moving the content from bottom to top for the rest of the sections Another thing is i noticed that i have been repeatedly declare this gsap.to(), and i not sure will it affect the code performance. I am really new to this GSAP animation, and this issue had me scratching my head. I hope you all could help me. Thank you so much.

Hi, there. I'm considering GSAP and ScrollTrigger to implement a horizontal scroll animation. ◯What I would like to implement Horizontal scrolling (2 blocks) Parallax of images Display of headings and body text ◯Plug-in ScrollTrigger When I implemented it, there is no behavior problem with 1 block, but when I increase to 2 blocks, scrolling and other behaviors do not seem to work at all. 【In the case of 1 block】 (Please press 0.5x or 0.25x) https://codepen.io/tozpsqam-the-animator/pen/WNPXEOe 【In the case of 2 blocks】 https://codepen.io/tozpsqam-the-animator/pen/YzBYPRO Is there any way to work the behavior of images, headings, and body text work even with two blocks? By the way, even in the case of two blocks, if the behavior of images, headings, and body text are disabled, it will work fine. 【In the case of 2 blocks (without the behavior of images, headings, and body text)】 https://codepen.io/tozpsqam-the-animator/pen/eYxeWRM

Hey there, Scroll trigger is not working when body overflow is hidden. I want the circle to move from top to bottom following the svg motionPath on mouse wheel. Is there any way to make this work?

Hello! First of all, Nice and fantastic work on the update of the GSAP website! I am trying to achieve something. I've seen some demos, but my case is slightly different, and maybe I need clarification about how snapping works and possible errors I'm having on the setup or the general idea. I'll try my best to explain myself. 1. I'm trying to pin the container and scroll the inner wrapper by translating it 100%. 2. The last thing I did was to be able to pin to the nearest "start" or the "end" of the section ONLY if it's past the start/end of a section. I attached my code pen example. Sorry if this doesn't go into this forum but I haven't had luck on stack overflow.

I saw this on Cenoa's website and I have been trying to recreate it with Gsap in a Nuxt 2 project. Can anyone help? Screen Recording 2023-10-16 at 07.15.09.3gp

Hey, I want to animate the white striped bar with the current animation. Additionally, the blue text should be visible when it comes into the view-port, and the purple text should be visible when it goes out of the view-port. Please help.?

Hello, I'm new to GSAP and have run into some problems. As you can see in the codepen scroll trigger is adding huge whitespace under a set height section. This is a problem for both mobile and tablet. I've tried everything but can't seem to remove it. Your guidance will be much appreciated. Thanks William

Hey guys, new to react and gsap here, also haven't used codepen before so I don't know how to import my models and use react there - thus the code looks messy and doesn't display anything but just putting it there for you guys to better visualise the problem I tried Scroll Trigger with 2d elements and they work fine, however when I try it with 3d elements it displays the usual error I see around about the missing plugin. I've tried searching for similar threads/problems but all those are for 2d elements and have not worked to solve my issue. My code with gsap.to works, but the scroll trigger afterwards doesn't work. I assume the problem is related to scroll trigger for 3d models? I wrapped it in a <Canvas> element. Error: Invalid property markers set to true Missing plugin? gsap.registerPlugin() Here is the code again in case codepen doesn't work: import React, { useEffect, useRef } from 'react'; import { useGLTF, PerspectiveCamera } from '@react-three/drei'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useControls } from 'leva'; import { useSound } from 'use-sound'; import * as THREE from 'three'; import { useFrame } from '@react-three/fiber'; import { OrbitControls, Html } from '@react-three/drei'; export default function BoxTest(props) { const { nodes, materials } = useGLTF('./models/box.glb') const ref = useRef(); const tl = useRef(); const { scale, rotation, position } = useControls({ scale: 0.8, rotation: [4.5, 6.5, 3], position: [-0.6, -1.4, -1] }); useEffect(() => { gsap.registerPlugin(ScrollTrigger); tl.current = gsap.timeline(); tl.current.to(ref.current.position, {y: 5, markers: true, ScrollTrigger: { trigger: tl.current, scrub: true, }}) }, []); return ( <> <ambientLight intensity={1} /> <OrbitControls enableZoom={false} /> <group dispose={null}> <group {...props} dispose={null}> <PerspectiveCamera makeDefault={false} far={100} near={0.1} fov={22.895} position={[7.359, 4.958, 6.926]} rotation={[-0.627, 0.71, 0.441]} /> <mesh ref={ref} scale={scale} position={position} rotation={rotation} geometry={nodes.Cube.geometry} material={materials.Material} /> </group> </group> </> ); } useGLTF.preload('./models/box.glb');

I am using this slider as a way to slide through items, now the problem is not in desktop view, there it works well, the main issue is in mobile view which seems to be bugging out and leaving a huge pin space and when scroll down the pin space wont get small or something which makes the items to scroll but there being huge gap between next element i tried doing my research for a day but could not find the issue, chatgpt was also not able to help angry-tess-mzkscz - CodeSandbox THis is my codesandbox link, please open it in new window and then use mobile view with dev tools to replicate the issue

If you are an expert, hit me a message right now, please contact me right now I have a few hours of work today, it's urgent. If you have experience in the observer, that would be great otherwise, the scroll trigger will work, but I need premium quality of smoothness and finish in animation. Html is already ready you only have to apply the gsap code for animation. I need an expert who can apply the animation right away, not a beginner who needs days to create animations.

Hi Team, We are trying to implement scroll tab functionality using GSAP & ScrollTrigger. On scroll, the content description and image have to change. The problem is that the content and image need to display correctly. It's getting hidden; sometimes, we need to scroll twice to display the content and images. Thank You

I have trouble with the margins of my slider container once I finish scrolling. I bet this is because of conflicts with another scrollTrigger, which should enlarge the backgrounds of similar sections on the scroll. Unfortunalety this is my first use of GSAP and I can't understand how to fix it. Just scroll my Pen and notice how Our Products text is jumping. You might need to open it in Codepen, looks like this problem is not reproducible in the widget. Thanks in advance!

Hi, Me again, I know there are lot of experienced developer on this forum. As a beginner I need help with an issue. I have made a scrollTrigger option and wanted to scroll only 1 section at a time. But I'm not sure how to do it. No matter how fast or slow I scroll I always want to scroll/pass only 1 section. Please see my demo and any help would be appreciated. Thanks Guys!

When you hover over the photos a svg morphs. Displaying a white shape over the bottom of the image. If you hover while scrolling there's a 1px gap below the svg and the bottom of the photo. I've tried adjusting CSS and some other JS tests with placement of the morphed svg. But can't seem to make the 1px gap disappear on scroll. Any advice would be greatly appreciated. Thank you!

In my codepen I have a script tag that runs a scroll trigger pin. I've tested the pin and know it works. But when it's added via the script tag (in the HTML) the start and end marker move on scroll smoother scroll. Is this multi script approach possible? Or should I just keep all scroll trigger/scroll smoother JS in one file? Here's the scroll trigger script for reference: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) function imagesMove() { let galleryImages = gsap.utils.toArray('.gallery picture') let wrapper = document.querySelector('.gallery .wrapper') let startWidth = wrapper.getBoundingClientRect().width - window.innerWidth gsap.to(galleryImages, { x: () => -startWidth, ease: "none", scrollTrigger: { trigger: ".gallery", pin: ".gallery", scrub: 0.5, anticipatePin: 1, start: "top: +=15%", end: "+=" + (window.innerHeight * galleryImages.length - 1), markers: true, } }); ScrollTrigger.refresh() } imagesMove()

How can we implement reactjs website animation with videos on scroll? On scroll, videos can be played continuously in a screen. The exact example is like below: https://staratlas.com/ Thank you.

Hi everyone, I've seen this demo to use CSS scroll snapping. I've tried to mix this setup with looped scrolling https://codepen.io/GreenSock/pen/rNOebyo) but I can't find the right setup. Is this mix possibile? Any ideas about? Thanks in advance

i have this horizontal scrolling website with different width per sections, what im trying to do is that when i stop scrolling it should scroll snap at the center of the current section, for visual i added span with 100vw with black color opacity box.