Search the Community

Hello everyone, i try to make this example https://codepen.io/oldskool123/pen/mdrrbyo in react js, but i don't understand why what I did does not work, I am applying what I saw in the documentation but it has not worked, I want to learn how to use this great tool but I have not been able to apply a more complex example in react js. I need some guidance, thanks. :') Here the code sanbox https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js

Hi, when we click on the button it opens a modal. Inside this modal, it's possible to scroll down to read all the content. It has on the left a "scroll indicator" and some bullet points related to text content on the right. I'd like to anim the scroll indicator (increase the height when we scroll down) and add a class to the bullet points when the scroll indicator hits them. I have two issues right now: - about the scroll indicator, scrolltrigger creates a huuuge blank space after my content so the the scroll indicator is biased and I don't know why (is it related to the end parameter) ? - I created another function to toggle class my bullet points, it's "working" but it's not perfect because classes aren't toggle exactly when the scroll indicator meet the bullet point. Is it possible to achieve what I want with only one function/scrolltrigger ? How to fix the end section bug ? Thanks in advance.

here is reference link https://ohio.clbthemes.com/demo31/ i want to create pin and section like this type how it is there in ohio site recent work

Hi GSAP team, I often use GSAP for a long time but just "copy pasting" the codes.... And now, I really want to expert it (going to buy your license in near time!) I have a couple question, actually a lot... Hope you can bear with me 1. Is there any wrong / bad syntax on my approach? Would you "correct" or tell me what's bad/wrong in my GSAP codes. 2. How to make the .draw-line class slower to bottom when I scroll it? I mean the duration. I do research and implement it, but it didn't work (I already take it out) 3. I want to add ".active" on ".timeline-li" when .draw-line start triggering. I already did it, but the "active" class removed automatically when it's outside the trigger area 4. I also want to change the image on the left, when the second .draw-line triggered. (We can talk later once these three are resolved) I'm so sorry if my question is too da*n much, hope any of you can help me out. Thank you, so so much!

Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much

Hi there, hope everyone is doing well I've an issue using gsap, scrollTrigger to be more specific for smooth scrolling (horizontal and vertical) currently everything is working well. The only issue i'm having is the lag that can be hardly noticed at the start of the page on desktop, but its really noticed on mobile. Here is the website link: https://beyond-the-veil.vercel.app Here is my code bellow, i've sent my whole code because it is really simple that work for vertical (mobile) and horizontal (desktop) and i'm having a bit of lag on both, thanks in advance for whoever helps. import { useRef, useState, useEffect } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const HorizontalScrollComponent = () => { const component = useRef(); const slider = useRef(null); const [isVerticalScroll, setIsVerticalScroll] = useState(false); useEffect(() => { const handleResize = () => { if (window.innerWidth < 1024) { setIsVerticalScroll(true); } else { setIsVerticalScroll(false); } }; window.addEventListener("resize", handleResize); handleResize(); // Initial check return () => { window.removeEventListener("resize", handleResize); }; }, []); useEffect(() => { // Target the container element to be scrolled const container = slider.current; const panels = gsap.utils.toArray(".panel"); const scrollDirection = isVerticalScroll ? "y" : "x"; const scrollSize = panels.reduce( (acc, panel) => acc + (isVerticalScroll ? panel.offsetHeight : panel.offsetWidth), 0 ); gsap.to(panels, { [scrollDirection]: () => -scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"], ease: "linear", scrollTrigger: { trigger: container, pin: true, scrub: isVerticalScroll ? 2 : 3.5, start: "top top", end: `+=${ scrollSize + window[isVerticalScroll ? "innerHeight" : "innerWidth"] }`, }, }); // Clean up ScrollTrigger when the component unmounts return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill(true)); }; }, [isVerticalScroll]); return ( <> <div ref={component}> <div ref={slider} className="app flex flex-col h-[100vh] w-[100vw] lg:flex-row lg:flex-nowrap lg:overflow-hidden" > <div id="header" className="panel w-full lg:h-[100vh] -z-[10] relative" > <LandingPage /> </div> <div id="tracking" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Tracking /> </div> <div id="investigating" className="panel lg:h-[100vh] sbg-blue-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Investigating /> </div> <div id="revealing" className="panel lg:h-[100vh] sbg-green-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Revealing /> </div> <div id="unveiling" className="panel lg:h-[100vh] sbg-purple-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Unveiling /> </div> <div id="footer" className="panel lg:h-[100vh] sbg-red-500 pt-[300px] md:pt-[250px] lg:pt-0" > <Footer /> </div> </div> </div> </> ); }; export default HorizontalScrollComponent;

Hello, I want to mask svg with scrolltrigger, but there is a problem in the code, I think it does not work. I want to bring the img from top to bottom, or from right to left, with an svg mask. Can you help me?

Hi, I have tried this in simple gsap now I want to do it using react gsap. Kindly guide me, how can I do that what I have to import

Hey I am super new to GSAP. How can I ensure that after my reveal animation is completed using GSAP and ScrollTrigger, the page doesn't scroll down right away but instead triggers a new animation on the revealed element (in this case its .center), and only after this animation is completed, it scrolls to the next section? EDIT:- I have tried adding another timeline in .center element but now also as you can see once first end reaches scroll-end after the reveal animation i want my .center element wait for second end to reach scroll-end again. Instead center starts scrolling just after reveal animation is completed(i.e first end reaches scroll-end )

Hello everyone, I'm currently working on a React application and have been trying to create an animation where a specific section within one of my components gets pinned, and upon completion of its animation, it should scroll down to the next component. However, I've run into an issue when applying ScrollTrigger and creating a timeline for an element within my component. The problem I'm experiencing is that the start and end markers of the viewport coincide, and the markers for my targeted element are nowhere to be seen. Additionally, the position of the screen marker has shifted, and a strange line appears, covering the entire width of my screen. I'm including the relevant code snippet from my component for reference: import React, { Fragment, useRef, useLayoutEffect } from "react"; import "./style/main.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); function Main() { const app = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { var tl1 = gsap.timeline({ scrollTrigger: { trigger: ".box2", start: "0% 50%", end: "50% 50%", scrub: "true", markers: "true", }, }); }, app); return () => ctx.revert(); }, []); return ( <> <div ref={app} className="App"> <div className="box1"> <div className="box">selector</div> </div> <div className="box2"> <div className="boxx">selector</div> </div> </div> </> ); } export default Main; Css for this component is body { background-color: var(--dark); color: var(--light); font-family: "Signika Negative", sans-serif; margin: 0; padding: 0; height: 100vh; } .box { position: absolute; width: 100px; height: 100px; border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--green); font-weight: 600; color: var(--light); transition: cubic-bezier(0.165, 0.84, 0.44, 1); } .App { display: flex; align-items: center; flex-direction: column; justify-content: space-around; min-height: 100vh; } .box1{ background-color: #ffffff; height: 100vh; width: 100%; } .box2{ background-color: #5900ff; height: 100vh; width: 100%; }

page.jsx In the Emotion Section , I tried implementing scroll trigger, it is my first time using it and I watched some videos before using it but i'm unable to trigger the scroll at desired point. The whole viewport scrolls even when the scroll is triggered

I have two scrolltriggers. One is for pinning, the other one is responsible for animating a timeline of tweens. I want the second scrolltrigger to animate when the pinned element is at a certain amount of scroll. How do I achieve this? I cant seem to figure it out, the trigger always starts after the pinned element has finished pinning.

Hello Greensock team, My first question here in the forum. Congrats on the new branding and the website. It looks awesome I recently created an infinite marquee/gallery effect. What I needed to add is that it should also react to scroll. Creating gallery that moves to right as a repeat tween and wrapper to move left and right based on scroll was also doable with ScrollTrigger. But I need it to move extra only to left no matter I scroll down or up. I've read related questions here on the forum and put together something. They were quite helpful. It works. I just want help to see if this is the right way to do this, syntax and performance wise. I'd be extremely grateful. Minimal Codepen Demo - https://codepen.io/deepak-gangwar/pen/mdaZqXM

I've been experimenting with GSAP for the past few weeks using next, and I've been trying to use "pin" with "scrollTrigger." However, it seems like I'm getting extra white space every time I use "pin" with the scroll trigger. Is there something wrong with my code? first, I create two refs. const animatedPath = useRef(null) const svgref = useRef(null) and second I use `useLayoutEffect` for register scroll trigger plugin and define gasp animation useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: svgref.current, start: "top top", end: "bottom 100", scrub: true, markers: true, pin: true } }) gsap.set(animatedPath.current, { strokeDasharray: 471.2, strokeDashoffset: 471.2, }) tl.to(animatedPath.current, { strokeDashoffset: 0 }) }, []) after that, i create svg with circle inside it <section style={{ height: "200vh" }}> <svg ref={svgref} style={{ width: "400px", height: "400px" }} xmlns="http://www.w3.org/2000/svg"> <circle cx={200} cy={200} r={75} fill="none" stroke="black" strokeWidth={10} ref={animatedPath} /> </svg> </section> The result shows that the `pin-spacer` class has a large padding/whitespace, and the animation doesn't start properly. full link https://codesandbox.io/p/sandbox/sad-lalande-q7c578?file=%2Fapp%2Fglobals.css%3A1%2C1 Thanks in advance!

Just starting out. Trying to animate clip-path on scroll. It's working but the left side doesn't transition out.. It just jumps to end, the the right side plays fine. Can anyone see what Im missing??? thanks T

Hello, I am new to the GSAP community, I want to implement the GSAP horizontal Scroll. I have a screen of full view width and height section. I want to pause the horizontal scroll animation for 100% of the screen. In the meantime, I want to add the scroll animation to that page. For example: We are scrolling through our section and at one section our section is pinned, and then another animation starts. A new section on the right coming over the section before. Below is my implementation in the Next Js. "use client"; import React, { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Login from "./login/page"; import Register from "./register/page"; import LandingPage from "./landingPage/page"; import LandingTransition from "./landingPageTransition/page"; import Category from "./categories/page"; import CategoriesList from "./categoriesList/page"; import PhilosophyPage from "./philosophy/page"; import Header from "./__components/header/Header"; import ArchetypePage from "./archetype/page"; import { escape } from "querystring"; import Accordion from "./__components/accordians/Accordians"; import Profile from "./profile/page"; import {useIsomorphicLayoutEffect} from '../helpers/isomorphicEffect' gsap.registerPlugin(ScrollTrigger); export default function Home() { const router = useRouter(); const [activeNav, setActiveNav] = useState(null); const [toggleNav, setToggleNav] = useState(1); useIsomorphicLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); let sections = gsap.utils.toArray(".panel"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: "#container1", pin: true, scrub: 1, end: "+=14000", }, }); gsap.to("#textCatogries", { y: -120, backgroundColor: "#1e90ff", ease: "none", scrollTrigger: { trigger: "#textCatogries", containerAnimation: scrollTween, start: "center 80%", end: "center 20%", scrub: true, id: "2", }, }); gsap.set( ".gsap-marker-start, .gsap-marker-end, .gsap-marker-scroller-start, .gsap-marker-scroller-end", { autoAlpha: 0 } ); ["landing", "archtype", "category", "cetogiresList","philosophy"].forEach((triggerClass, i) => { ScrollTrigger.create({ trigger: "." + triggerClass, containerAnimation: scrollTween, start: "left 30%", end: i === 3 ? "right right" : "right 30%", markers: false, onToggle: (self) => gsap.to(".marker-" + (i + 1), { duration: 0.25, autoAlpha: self.isActive ? 1 : 0, }), }); }); }, []); const handleNav = (navNumber: any) => { if (navNumber === activeNav) { setActiveNav(null); } else { setActiveNav(navNumber); } }; return ( <div className=""> <Header navTheme={ toggleNav == 2 ? "bg-primary text-white" : toggleNav == 3 ? "" : "bg-[#E3FF00]" } toggleNav={activeNav === 2} handleNav={() => handleNav(2)} navCol={toggleNav} /> <div className="mainans "> <div className="containerMain" id="container1"> <section className={`panel landing`}> <LandingTransition /> </section> <section className={`panel archtype`} data-pin="true"> <ArchetypePage /> </section> <section className={`panel category`} data-pin="true"> <Category /> </section> <section className={`panel cetogiresList`} data-pin="true"> <CategoriesList /> </section> <section className={`panel philosophy`} data-pin="true"> <div className="Philosophy"> <PhilosophyPage scrollCheck={true} /> </div> </section> </div> </div> </div> ); }

Hello everyone It is a React App. My scrollTrigger work fine on local but recently a put it online and I get some errors in console i made a console.log('Scrolltriger' ,ScorllTriger ) I get a response. here is part of my code import React, { useEffect, useRef, useState } from 'react'; import PhpPng from '../../../assets/images/PHP.png'; import ReactPng from '../../../assets/images/REACT.png'; import SymfonyPng from '../../../assets/images/SYMFONY.png'; import './index.scss'; import Modal from '../Modal'; import projectDataMap from '../Data/index'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const disableScroll = () => { setScrollDisabled(true); }; const enableScroll = () => { setTimeout(() => { setScrollDisabled(false); }, 1500); }; // Animation GSAP const overlayZoom1 = () => { const tl = gsap.timeline({ scrollTrigger: { trigger: '#section1', start: '-10 top', end: '-10 bottom', scrub: 2, pin: true, // markers: true, onEnter: () => { disableScroll(); }, onLeave: () => { enableScroll(); }, }, }); tl.to('.overlay-zoom-section1', { scale: 30, y: -100, x: 50, duration: 3, }); tl.to('.scroll-headline-section1', { y: 120, opacity: 1 }, '<50%'); tl.to( '.scroll-button-section1', { x: positionBtnX, y: positionBtnY, opacity: 1 }, '<80%' ); tl.to('.overlay-zoom-section1', { display: 'none' }, '<'); }; i thanks you in advance for your time.

I have stuck to make a normal scroll with Observer. I have scroll snapped from sections 1 to 2 and from sections 2 to 4 scroll normally with Observer. The body has overflow: hidden that I can't remove. Currently, the normal scroll I make by increasing progress to test. I'm trying to make it scroll by translate y with the mouse or wheel scroll value. This is the code sandbox: https://codesandbox.io/s/scroll-rfjx9k How can I reach that? Please help me . Thanks so much

Hi, I have an element that rotates infinitely 360 degrees using GSAP. I've also implemented direction-based rotating on scroll using ScrollTrigger. It works great initially but once you begin to scroll either up or down and the scrolling stops, the element jumps to its original rotating position and begins rotating again which isn't ideal. This is the code that I'm using: gsap.to(this.rotatingText, {rotation: 360, duration: 40, repeat: -1}); var rotate = gsap.timeline({ scrollTrigger: { trigger: "html", scrub: 0.2, start: "top top", end: "+=10000" } }).to(this.rotatingText, { rotation: 360 * 5, duration: 1, ease: "none" }) Ideally, I would love it to, be that after scrolling, it gets the element's current rotated position and then begins rotating again from that point. You can view a video screenshot of the issue here: https://www.veed.io/view/6de5e2cc-072e-45d7-bb30-d015766ae546?sharingWidget=true&panel=share Any help would be greatly appreciated. Thanks

Hi GSAP community. 2 image sequences 2 canvas' Text appears in the middle/between the 2 sequences Each image sequence renders to their respective canvas. I would like some help setting things up so that the 2 sequences become 1 longer sequence rendering to 1 canvas. But I need the ability to pause or hold this longer single sequence at a particular frame number, so I can animate (text for example), at specific points in the sequence. Please note, if this is achievable I will scale things up to a much larger sequence which will require very specific control to be able to hold/pause (for a declared period of time) at multiple points in the timeline at specific frame numbers etc. To help things along I have a folder at the same location as the other folders called "000" so replace the first sequence's location "001" with "000". - There are 51 images in the "000" folder and the first pause point would be at frame "26" if we are to replicate my codpen example. Thanks guys. ?

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, I have an issue with text flickering on Safari. It happens only when I scroll. On Chrome and other browsers it works smoothly. I am using ScrollTrigger to move the text to the right side. Any ideas how to solve this issue? Everything is kindly welcomed.

I have one timeline. inside div I have 3 divs ( position: absolute ) I am pushing animation objects in a array const anim = mainTimeline.from(...) animations.push(anim); but when I try to play animation on specific index, for example animations[2].play() it plays whole timeline is it possible to play only specific animation under same timeline?

Hi all.To avoid indents at the bottom I made a couple of manipulations.I added "margin" for the "pin-spacer" element at "onUpdate" method "scrollTigger".But when scrolling it is noticeable how the whole section jumps.Everywhere examples where the "pin" element covers the whole screen,but there are no examples where the elements keep their positions and without any gaps. I just wanted the section with cards was pinned to the top of the screen until it does not scroll to the end horizontally and that the gaps at the bottom was not, as the screens are different and everywhere look different.As you already know "pinSpacing:false" does not help, as the sections are layered on top of each other, and I do not need it.I will be glad to any suggestions. Pls check on full screen mode to better understand what i mean

The first two sections of this animation are working almost perfectly as I intended. However, there is one issue I would like to resolve: I want the image and text to slide up before the section is pinned, and once the section is pinned, I want the image to slide down as the user scrolls, while gradually reducing the opacity of the text based on the scroll progress. There is also a major issue: when the third section starts coming into view, the animation of the image sliding up and down starts to break. Could you please review the animation in the first two sections? This is the effect I'm aiming for across all sections. Additionally, I would like the same animation to occur in reverse when the user starts scrolling back up. I would greatly appreciate your assistance with this. Thank you,