Search the Community

HI, I'm facing a problem with Observer. It perfectly works on every device except touch device. In a touch device, the observer starts from the opposite direction. If you visit my website (https://transcendstudios.asia/) from mobile, I hope you will get the issue. Also, you can check the example (CodePen) from mobile. onDown, slider should slide bottom to up and onUp slider shoud slide up to bottom. But in mobile it reversed. Thanks

Hello, I have an issue with GSAP scroll trigger where a screen-wide white bar set in sticky position at the bottom of the screen appears out of nowhere for no reason. It seems to stop being sticky once you reach a certain point after scrolling down in the page. I cannot seem to identify what it is or what is even causing the issue. I think it is somewhat related to the pin-spacer. In the code pen, you can clearly see the white bar slowly fading behind the footer.

As you can see from the minimal demo, when you load in you have some text and when you scroll an observer triggers a timeline to play. And then the Observer disables and the user can scroll through the rest of the page. This is all great. However, after you scroll once you cant scroll back up to let the animation play in reverse. You actually have to scroll down again into the page and then come back up for it to play in reverse. This of course is not ideal. I understand that it is doing this because I have an onComplete() in the scrollTrigger that disables the Observer and then only re-enables it on an OnLeaveBack() So I understand the issue but because I am fairly new to Observers in general and using them with scrollTrigger I can not figure out the right approach for this... There is quite a bit of javaScript in my codepen but you should be able to ignore the top half. Everything inside the commented section IMAGE SLIDESHOW can be ignored. Its clearly marked with comments with a start and end point of that code. Furthermore the section in between the gsap.timeline() and the const scrollObserver is mostly just tl.to animations, which can also be ignored I believe the issue I am trying to show is clear, to recreate the issue just scroll down once. Let the animation play out, and then try to scroll back up and you will see the animation will not reverse. You will notice if you scroll down, let the animation play out, then scroll down past the section, then scroll back up to the observer area, then it will in fact play in reverse Any help at all is much apprieciated!

Hello, i'm trying to create this animation in which I will have many lottie animations that will be chained one after another (basically, it should've been only one big animation, but I don't think it would've been good performance-wise, so I'll have to split in more animations and position them so they connect seamlessly and only play one or two at a time). For now I'm using svgs to test things out. My issues are the following: 1: Each section has a different height and will need to be scrolled a slightly different vertical/horizontal amount, and I'm not sure I'm doing it correctly. Is it ok to animate the same properties of the same element in the same scrolltrigger like I'm doing? 2: Sometimes the performance doesn't seem great and I was wondering if the issue was the way I'm chaining the svgs together and gsap having to do some more intensive work (?) 3: I can't get the snapping to work perfectly and i'd really appreciate some suggestions on how to achieve that. For now I just managed to get a magic number working ( snap: 1/5.24). Here's the codesandbox, I didn't use codepen because It didn't allow me to add custom images as files https://codesandbox.io/p/sandbox/lively-field-29rqgq?workspaceId=0594864b-79ee-45da-baa8-7022bffe9845

Hello everyone First of all, I hope you'll excuse my English, my native language is Spanish. I have a problem with an animation that I want to replicate from the following website: https://www.creatif-studio.com/ The animation starts with each card with scale: 1.1 and rotationX: 60deg, when it reaches the middle it scales to 1 and when it goes up it should scale to 0.9. When the second animation is executed a jump occurs that I don't know why it happens. I have tried many ways but I can't get my animation to be similar to the reference. I know I'm making one or more mistakes but I don't know what they are. I'll leave you my code and I hope you can help me, thank you very much.

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

I wanna create a scrollTrigger animation like the one in https://figr.design/ website homepage; if you have any suggestions, that would be a great help for me.

Hi there, I've been learning and really enjoying GSAP! Thanks for the wonderful docs, learning materials, and forum. I want to create an effect of an infinitely moving horizontal line, which moves FASTER or SLOWER in reaction to scroll. So passively, let's say the line scrolls at "duration 5". - If I scroll down, I want the line to move faster, e.g. at duration 5 - adjusted scroll velocity = 2. - If I scroll up, I want the line to move slower, e.g. at duration 5 + adjusted scroll velocity = 8. Here's a minimal demo of both effects individually, but I haven't been able to successfully combine them. I've tried to manually adjust the duration variable through ScrollTrigger's onUpdate, using "getVelocity()", but that didn't seem to work. I've left it blank in the demo. If someone could point me in the right direction of how to approach this, I can try to do it in the demo myself! Thanks again. (not sure how to embed stackblitz demo directly) https://stackblitz.com/edit/react-ejg7zb?embed=1&file=src%2FApp.js

The "start" position for an element animated with ScrollTrigger appears to be affected by transforms. Is there a way to force the ScrollTrigger to calculate the start value before the transform has been applied? More details: in the attached Codepen, both boxes have a start value of "top 50%" and I'd expect their animations to play at the same time. Box A on the left, with no transform, fires as expected. However Box B, which has a y: 200%, starts later/lower because its start value is calculated using the post-transform position. The problem persists whether I use % or whole numbers in the timeline.

Hey there Thanks for all your tools, the updates and new features. Really appreciate and love to work with it! Is it possible to normalize scroll on custom scrollers in future releases of ScrollTrigger? Currently the normalisation only works for the overall page, similar to ScrollSmoother, right? The CodePen provided is just a quick test in reference. Comment out ScrollTrigger.normalizeScroll(true); to see how it breaks the scrolling.

Hello Guys, Hope you are doing good. iam trying to animate section over slider but getting issue when section have custom height less then 100vh. when section height is 100vh its working fine. When i false the pinspace then scroll is stopped if giving pin spacing true then giving blank space below. Tried with wrap all content into div. Any help or suggestion will be very helpfull.

When using GSAP's ScrollTrigger to pin a section and animate a horizontal panel, there is a noticeable scroll jump after the animation completes. The issue arises when the `onLeave` callback disables the ScrollTrigger, causing the scroll position to jump unexpectedly. Demo on CodePen #### Expected Behavior 1. The user scrolls down animated section. 2. The page is pinned, and the `.panel` animates horizontally from right to left. 3. After the animation ends, the pin is removed, and scrolling should continue without any jumps. #### Actual Behavior - When the `ScrollTrigger` is disabled via the `onLeave` callback, there is a noticeable scroll jump, disrupting the user experience.

Hello everyone, Im new to Gsap, I'm trying to learn it. but right now I'm stuck at creating a vertical animated Timeline. i also applied scrollTrigger but my code is messed up!. Please look at my code. once and correct my mistake. This is what i want to make :- https://youtu.be/qTeqwp7Uvro and this is my code pen:- https://codepen.io/Mohit-Mishra-the-looper/pen/abggwpx?editors=1000 what i want is that. 1. when user scrollDown the height of the ".timeline-inner" will increase. and when the ".timeline-inner" hits the ".dot" of the specific box then the opacity of that's h2 and paragraph become 1

Hi, could I have some help please? I want to create a horizontal slider with some navigation buttons. However, when clicking buttons back and forth the active slide is not fully in view? I think this has something to do with the slider being pinned - scrollX and Y is conflicting? Is there a solution to this? Any help would be much appreciated, thanks.

Hello Firstly, it's weird how I'm first one who is asking about this(probably I'm diving deeply here 😁) However, my question is simple, I have a box and I want to change it's aspect ration while moving based on path Here is a helper image to understand the steps I want to go through

Hello, I am a webflow developer. I encountered a problem related to horizontal scrolling and need to use scrolltrigger. I need to change this "https://youtu.be/rFUNxuHgK1U?si=aepq0gV91bljWbmS" effect to horizontal scrolling, and keep everything else the same. But I don't know how to achieve it. Thanks

Hi everyone, I'm encountering an issue with my layout, particularly with the z-index. I have my title in the background, my image just above it, and certain letters of the title even higher up. After setting this up, I wanted to create a GSAP animation that would zoom in massively on the title, as if there was something behind it. The problem is that as soon as I initialize my animation, the stacking context changes, and my image instantly moves above my title, especially the letters that should remain on top. How can I fix this? import styled from 'styled-components'; import gsap from 'gsap'; import Image from 'next/image'; import { useEffect, useRef } from 'react'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); export default function Heading(props) { const eachTitleLetter = props.titre.split(''); let isFront = false; const isFrontFunc = (letter) => { isFront = ["p", "c", "s", "o", "a"].includes(letter); } const title = useRef(null); const imageTitle = useRef(null); const subtitle = useRef(null); useEffect(() => { const t = title.current; const animation = gsap.to(t, { scale: 40, x: -1500, y: 500, scrollTrigger: { trigger: t, start: 'top 25%', end: '150% 30%', scrub: true, }, }); const subt = subtitle.current; const animation2 = gsap.to(subt, { opacity:0, scrollTrigger: { trigger: t, start: '-10% 30%', end: '0% 30%', scrub: true, markers: true, }, }); }, []); return ( <> <Layout> <Container> <Hero> <Title ref={title}> {eachTitleLetter.map((letter, index) => { isFrontFunc(letter); return <span key={index} className={isFront ? "z-index3" : ""}>{letter}</span>; })} </Title> <Image ref={imageTitle} className="roses-img" src="/images/roses.jpg" alt="" width={550} height={90} /> <div className="subtitle-layout" ref={subtitle}> <SubTitle>Fleurir dans l&apos;ombre</SubTitle> <SubTitle>Vêtements</SubTitle> </div> </Hero> </Container> <FakeComponent /> </Layout> </> ); } const Layout = styled.div` overflow-x: hidden; &::-webkit-scrollbar { display: none; } `; const FakeComponent = styled.div` height: 200vh; background-color: #062718;; `; const Container = styled.div` display:flex; justify-content:center; align-items:center; width:100%; height:100vh; position:relative; `; const Hero = styled.section` position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); display:flex; flex-direction:column; align-items:center; justify-content:center; width:fit-content; height:100vh; .roses-img { position:absolute; height:90px; width:550px; object-fit:cover; z-index:2; } .subtitle-layout { display:flex; justify-content:space-between; flex-direction:row; width:100%; } `; const Title = styled.h1` line-height:230px; font-size:200px; white-space:nowrap; font-family: "SixCaps", sans-serif; font-weight: 400 !important; font-style: normal !important; margin-top:-10px; span { position:relative; z-index:1; } .z-index3 { z-index:3; } `; const SubTitle = styled.h2` color:white; font-size:16px; font-weight: 300; font-style: normal; opacity:0.7; `;

Hi everyone, I’m working on a project where I’m trying to use GSAP’s Observer plugin in combination with ScrollTrigger to create a section-based scrolling experience. The goal is to have vertically pinned sections, and when the user reaches a certain section (Section 3), a zoom animation starts. During the zoom animation, I want to disable the Observer to prevent the user from scrolling to the next or previous sections, and re-enable the Observer once the zoom animation is reset or the user scrolls back to a previous section. I also tried disable the Observer logic directly in the onComplete function to be able to start the Zoom Animation, but i could not re-enable it again to scroll back to previous section Can anyone help me? thank you.

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

I have some sections that I am sticking to the top of the viewport and fade-in alpha. This triggers animations in a MapBox GL layer. When these animations are in progress and the user continues to scroll the 'story' panel, it causes the sections to jump up and down and glitch. If I hide the mapbox layer it is smooth and sticks to the viewport without any issues. This is my code for the ScrollTrigger: useGSAP(() => { // add a ScrollTrigger for each section that will pin it to the top of the viewport for the duration of the viewport selectors.forEach((selector) => { const sectionElement = scrollRef.current?.querySelector(`#${selector}`); if (!sectionElement) return; gsap.to(sectionElement, { // ease: "power4.out", alpha: 1, scrollTrigger: { trigger: sectionElement, start: "top top", end: "+=450", scrub: 0, pin: true, scroller: scrollRef.current, onEnter: () => sectionDidEnter(selector), onLeave: () => sectionDidLeave(selector), onEnterBack: () => sectionDidEnterBack(selector), onLeaveBack: () => sectionDidLeaveBack(selector), } }); }); }, {dependencies: [selectors], scope: scrollRef}); The MapBox animations are triggered by the event handlers. It's pointless providing a CodePen for this as it is a performance problem. Here is a screencast that shows the issue: <VIDEO REMOVED> One potential fix is to make sure that ALL of the GSAP tweens are completed before it starts the MapBox animation (currently the Alpha continues after the element has hit the top of the screen. Is there a way to tween the alpha so it is 100% as it hits the top? Any suggestions on managing the animation performance between the two panels?

Hey all my GSAPers! I found this cool heading effect on https://khaby.rocani.co/ and tried to recreate it in React / NextJS. I was wondering if anyone knew why the text in the demo im linking, is not rotating in the same matter. Im wondering if it has something to do with perspective of the parent container? Any help is highly appreciated! https://stackblitz.com/edit/stackblitz-starters-zg7lch?file=components%2FRotatingtext.tsx

I copied the gsap code from Cassie https://codepen.io/GreenSock/pen/QWaKmEz, but her animation works fine after resize and the markers are not missaligned.

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.

I have some simple sections being rendered in my React component but they are dynamically generated from a JSON file. All I need to do is pin each section to the top of the screen for an amount of time and then allow scrolling to the next section. I need to get the selector ID for each section and use that to identify the section as I scroll in and out. Do I need to create an animation for each section like this or can I use the class storymode-section and hit them all in one go? 'use client'; import React, { useEffect, useRef, useState } from 'react'; import { gsap } from "gsap"; import { useGSAP } from '@gsap/react'; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { FakeStorymodeData } from '@/utils/FakeStorymode'; gsap.registerPlugin(useGSAP); gsap.registerPlugin(ScrollTrigger); interface StorymodeContentGSAPProps { } export const StorymodeContentGSAP: React.FC<StorymodeContentGSAPProps> = (props: StorymodeContentGSAPProps) => { const scrollRef = useRef<HTMLDivElement>(null); const [activeSection, setActiveSection] = useState<string>('Section 1'); const [selectors, setSelectors] = useState<string[]>([]); useGSAP(() => { // add a ScrollTrigger for each section that will pin it to the top of the viewport for the duration of the viewport selectors.forEach((selector) => { const sectionElement = scrollRef.current?.querySelector(`#${selector}`); if (!sectionElement) return; gsap.to(sectionElement, { scrollTrigger: { trigger: sectionElement, start: "top top", end: "bottom top", pin: true, pinSpacing: false, onEnter: () => setActiveSection(selector), onLeaveBack: () => setActiveSection(selector), } }); } ); }, {dependencies: [selectors], scope: scrollRef}); useEffect(() => { // create an array of the section.id's const sectionIds = FakeStorymodeData.map((section) => section.id); setSelectors(sectionIds); }, []); return ( <div ref={scrollRef} className="w-full h-full flex flex-col justify-start flex-shrink-0 overflow-y-auto prose "> { FakeStorymodeData.map((section, index) => { return ( <section id={section.id} key={index} className={"storymode-section flex flex-col justify-start w-full p-2 mb-64 " }> <header className="w-full bg-gray-300 p-2 rounded"><strong>STICKY HEADER</strong></header> <h2>{section.header}</h2> <p>{section.content}</p> </section> ); }) } </div> ); }