Search the Community

useLayoutEffect(() => { const animationContext = gsap.context(() => { const timeline = gsap.timeline(); const timelineButtonOff = gsap.timeline(); timeline.to(".landingOverlay", { opacity: 1, zIndex: 1, duration: 0.1, paused: isButtonClicked, ease: "none" }); timeline.to(marqueeDummy, { duration: 0.3, opacity: 0.4, }); const loopDummy = horizontalLoop(marqueeDummy, { repeat: -1, speed: 0.3, reversed: true }); const loop = horizontalLoop(marquee, { repeat: -1, speed: 0.3 }); timeline.add(loopDummy, 0.1); timeline.add(loop, 0); timelineButtonOff.to(".menuCarousel", { x: '-' + distance, ease: "none", scrollTrigger: { trigger: ".landingScreen", toggleActions: "restart pause reverse reset", start: "center 45%", end: "+=3000", scrub: 0.1, pin: true, pinSpacing: true, }, onReverseComplete: () => { setIsButtonClicked(false); timeline.play(); console.log('timeline has restarted'); } }); if (!isButtonClicked) { timeline.play(); } else { timeline.kill(); timelineButtonOff.play(); } }); return () => { animationContext.revert(); }; }, [isButtonClicked]); <div className='landingOverlay position-absolute' onWheel={handleButtonClick}> {/* landingOverlay content */} <button className='d-block rippleButton' onClick={handleButtonClick}><FaAngleDown /></button> </div> <div ref={landingScreenRef} className="landingScreen"> <div className={`marquee position-relative ${isButtonClicked ? '' : 'rotatedContainer'}`}> <div className="dummyCarousel d-flex flex-row"> {/* dummyCarousel content */} </div> <div className='my-4'> <div className='d-flex flex-row menuCarousel position-relative'> {/* menuCarousel content */} </div> </div> <div className='dummyCarousel d-flex flex-row'> {/* dummyCarousel content */} </div> </div> </div> I am trying to implement a marquee-like animation effect for a menu carousel on the landing screen. The isButtonClicked state changes from false to true when you do handleButtonClick and to false when you reverseCallback. When I reverseCallBack, the state of menuCarousel changes to original but not that of dummyCarousel. What am I doing wrong? Edit 1: I figured that the problem is in using reversed: true for the handleLoop function

Hello everyone. There is a problem with pinning the element via Scroll Trigger. I do everything according to the documentation, but unlike the example, I have the transform: translate property added for the target element. I tried to apply pinning to any other DOM element to find the problem in my code, but the result is always the same. I can't understand what this behavior is related to. I set the ending position += 100 for the test, initially I do not specify the end property so that the page continues scrolling after the animation, but in this case the translate property becomes about 1700px and it is very difficult to test. the page just breaks Screenshots: https://disk.yandex.ru/d/oAheog2IPXLONA

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..

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

I have applied id="smooth-wrapper" and id="smooth-content" by wrapping with div. But it is not working. I followed https://codesandbox.io/s/stupefied-minsky-pzceim?file=/src/App.js:733-752 but couldn't understand how to apply ScrollSmoother in these component based structure.

Hi GSAP community! Hope you're doing well! I would like have an answer about multiple paragraph animated with the SplitText module in react environment. In fact, i'm tryin to make a dialog box with multiple paragraph that I split to make an effect like in a video game. My problem is I would like to remove the previous paragraph before the new one start his animation so that it'll appear at the top of the dialog box. I made a codesandbox (sorry i didn't find a way to make it works with codepen) here : https://codesandbox.io/s/adoring-currying-12sedl? Is there a way to do that ? Thanks in advance.

I am building react project with GSAP. I am trying to create an animated div that will scale up based on scroll. My animation works perfectly on codepen demo. But when implementing it in my project, it sets the markers wrongly. But when I change routes, and come back, the markers automatically get set perfectly. Please watch the video for better understanding, or go to this link https://ayank007.github.io/newportfolio/# Source code: https://github.com/ayank007/newportfolio/blob/master/src/components/Work/index.tsx in line 37 Can anyone please help me, what went wrong. Thank you. Untitled.mp4

Suppose I have a section which has a few elements belong to a "circle" class with their own sets of animations defined in a useEffect hook in the very same component itself. Then I have another component with different elements belonging to the "circle" class but with their own set of animations that are different from the first ones defined in their own useEffect hook in the component itself. Would these two animations interfere with each other and also target the animations in the other component or would it be scoped properly? Currently because I am not sure about this I am just using contexts to scope the animations within each component.

Hello, I'm currently working on a project where I would need to pin a container and keep the scroll going in the right column. However I'm running into an issue where the ScrollTrigger markers seems to be offset with the panels. I can't get the left content ends when it reaches the next trigger. Here is a simplified version: https://codesandbox.io/s/romantic-fast-xwfefy I notice that the speed of the right columns seems to be "parrallaxed" to the markers. What I am trying to do: Coordinate the appearing of the pinned left content while scrolling the right content. Thank you

I have a useEffect hook which does some animations which goes like this - useEffect(() => { const ctx = gsap.context(() => { const tl = gsap.timeline(); tl.from(".hero-text", { opacity: 0, x: "-5vmin", delay: 1, duration: 1, ease: "expo.out", stagger: 1, }); tl.to( ".hero-text", { letterSpacing: "0.1em", stagger: 0.9, }, "-=2.5" ); }); return () => ctx.revert(); }, []); I have another animation that I want to run after this animation has ended, but if I add it inside the same useEffect hook it'll make the code a bit messy. I can definitely have a completely different useEffect hook and write the animation there but that way I won't be able to use the timeline defined for this animation. Currently I am just using a delay but I feel like that ain't the best way of achieving the result I want. Is there a way I can add an animation to the same timeline while making sure that the code ain't really messy. Can contexts help in this? Having the animations inside useEffect ain't necessary for my purpose so am open to any sort of suggestions that can be implemented in React, or specifically NextJS.

Hi, I've built a React site with GSAP and LocomotiveScroll, and added a bunch of ScrollTriggers. Everything works fine and as expected in my local machine, however, when I deploy the site into vercel all the animations that were suppose to get triggered with ScrollTrigger immediately start animating as soon as the page loads. I've seen some other forums with the same problem, however, none of those solutions have worked for me like changing .from() into .fromTo() or calling gsap.registerPlugin(ScrollTrigger) inside useEffects() of every page with a ScrollTrigger animation or adding "lazy: false". I get a this below error in all the pages that has a ScrollTrigger: react_devtools_backend.js:2655 Invalid property scrollTrigger set to {trigger: '#main', start: 0, end: '+=50%', scrub: true, scroller: '#main-container', …}end: "+=50%"lazy: falsescroller: "#main-container"scrub: truestart: 0trigger: "#main"[[Prototype]]: Object Missing plugin? gsap.registerPlugin() ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- almost all of the pages with a ScrollTrigger has a code like this: const Skills = () => { useLocoScroll(); const mainRef = useRef(); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { gsap.from("#curtain", { duration: 10, x: "-100vw", ease: Power4.ease, scrollTrigger: { trigger: mainRef.current, start: "top top", end: "bottom center", scrub: true, scroller: "#main-container", toggleActions: "play none none reverse" } }) }, mainRef) return () => ctx.revert(); }, []) return ( <> <div style={{position: "relative", overflow: "hidden"}}> <div style={{position: "relative", overflow: "hidden", height: "100vh"}} ref={mainRef}> <div className={styles.curtain} id="curtain"></div> <div className={styles.pageTransitionBlack} id="main"> <Navbar /> <Header headerText={"My Skills"}/> </div> </div> </div> </> ); } export default Skills;

Hi! I'll be very appreciated if you help me figure out how to reinitialize animation by the best way using React. I have flex containers, so when i change window height, i want my animations get new values, such as 'scrub = 3' on window size more then 600px, or 'scrub = true' otherwise, because on small height 3 seconds scrub will break animation. Also some elements wants to know actual window size for right positioning. You see, purple square want to move directly to the middle of next section, so we set 'y' value as section height, which exactly is window.innerHeight tlFromBot.to('#purpleSquare', {y: window.innerHeight, rotation: 360}, 0) But window.innerHeight is dynamic value, so what the best way for smooth reinitializing values, recreate new animations or maybe somehow change values in existing animations?

hey!! suuupper new to GSAP. I am trying to replicate this website's "master your money" section animation https://jupiter.money/ . I have tried to implement it. Below is my code which I tried so far. import React, { ReactElement, useEffect, useState } from "react"; import gsap from "gsap"; import { useLayoutEffect, useRef } from "react"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const spotlights = [ { id: 1, icon: "", title: "Master coding with interactive practice.", }, { id: 2, icon: "", title: "Build coding skills with practice problems.", }, { id: 3, icon: "", title: "Practice coding, unlock your potential.", }, { id: 4, icon: "", title: "Earn coding certifications with tests.", }, { id: 5, icon: "", title: "Guided learning with courses.", }, ]; const togglePosition = "fixed left-0 right-0 w-full"; const Spotlights = () => { const [mount, setMount] = useState<boolean>(false); const [activeSlide, setActiveSlide] = useState<number>(0); const component = useRef() as React.MutableRefObject<HTMLDivElement>; const sliderContainer = useRef() as React.MutableRefObject<HTMLDivElement>; useEffect(() => { setMount(true); }, []); const tl = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { let container = document.getElementById("spotlights"); let contents: HTMLElement[] = gsap.utils.toArray(".content"); gsap.set(contents, { autoAlpha: 0, y: 500 }); let tl = gsap.timeline({ scrollTrigger: { trigger: component?.current, scrub: 1, pin: true, pinType: "fixed", pinSpacing: true, start: "center center", end: () => "+=" + window?.innerHeight * 3, markers: true, onUpdate: (self) => { // get the active slide index based on the ScrollTrigger progress const activeIndex = Math.round(self.progress * contents.length); setActiveSlide(activeIndex - 1); }, }, }); contents.forEach((content: any, idx) => { tl.to(content, { duration: 0.33, opacity: 1, autoAlpha: 1, keyframes: { y: [1000, 200, idx * -content.offsetHeight], }, }); }); }, component); return () => ctx.revert(); }); return ( <section id="spotlights" className={` spotlights bg-[color:var(--theme-color5)] h-full`} > {/* /* -------------------------------- LEFT PANE ------------------------------- */} <div ref={component} className="spotlight--container md:flex px-4 h-full flex-col-reverse md:flex-row items-start hidden max-w-6xl mx-auto" > <div className={`py-12 lg:py-20 relative lex-1 text-center lg:text-left lg:mr-6`} > <h2 className="text-[1.5rem] sm:text-4xl md:text-4xl lg:text-4xl pt-2 pb-3 mb-7"> <span className="text-[color:var(--secondary-color)]"> spotlights&nbsp; </span> of abc </h2> <ul className="flex flex-col gap-2"> {spotlights.map((item, idx) => { return ( <> <li key={item.id} className={`transition-all ease duration-300 ${ activeSlide === idx && "bg-[color:var(--theme-color3)] rounded-md" }`} > <h4 className="flex p-4 rounded-md font-medium transition-all ease duration-1000 text-xl text-[color:var(--theme-color2)]"> <span className="ml-4">{item.title}</span> </h4> </li> </> ); })} </ul> </div> {/* /* ------------------------------- RIGHT PANE ------------------------------- */} <div id="right" ref={sliderContainer} className="container flex-1 ml-6 relative h-[inherit]" > {spotlights.map((item, idx) => { return ( <> <div key={idx} data-controller="scroll-spotlight" id="one" className={`content content1 h-full transition-transform ease duration-2000 bg-[color:var(--secondary-color-light)] flex justify-center items-center z-[${ idx * 10 }] absolute w-full`} > {item.title} </div> <div className="spacer h-[inherit]"></div> </> ); })} </div> </div> </section> ); }; export default Spotlights; It's behaving weird. I am not sure what is actually going wrong. The animation speed is too fast and the sliding animation on scroll isn't working i want it to. I have been stuck with this for two days. Any help is appreciated. the link to current working is attached below https://drive.google.com/file/d/1u89IQHwBlYncTxg3e64OzRV2I1sl6lqE/view

I just started learning react.js with gsap and stuck at this point useEffect(() => { const cx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: '.home', start: 'top top', end: "+=" + window.innerHeight * 3, pin: true, scrub: 1 } }) }, main_ref) return ()=>{ cx.revert() } }) my question is that, How can I declare this timeline globally because I want to use this timeline in multiple components or there is any other way to perform the same thing. And yeah, this timeline is declared in the App.jsx file which is the main file of my project. Thanks in advance.

Hi, im trying to convert an existing draggable codepen to work with react. But its not working. it only works when i swipe to the left or hit the prev button, swiping next doesnt work. Also, it doesn't snap. I'm new to gsap and not sure where i'm going wrong. i omitted the timer to disable the automatic swiping to help troubleshooting. the codepen i'm trying to convert to react: https://codepen.io/osublake/pen/veyxyQ

Hello , i have this code made with react and Draggable , dont know why the left and right handler dont correctly set the width of the container , did i make a mistake , thanks in advance : https://codesandbox.io/s/confident-hermann-i8753p?file=/src/App.js

Hello. This is my first proper project with GSAP, been enjoying learning and animating with it. ? I have this example on codesandbox. It uses ScrollSmoother, ScrollTrigger and some timeline animations on text. Everything works perfectly in the dev preview with npm run dev. But when I build the project with npm run build then npm run start, many of the animations just dont run. Especially when using nested timelines. All of the calls are inside a useIsomorphicLayoutEffect hook and I've used context and refs everywhere. Here are some findings: The animations run when I take out ScrollSmoother (But I want to keep it) When I take the ScrollTrigger out, the animation will run All runs fine on the dev preview I wonder if anyone has had similar issues or can shine a light on what might be causing it? Preview: https://yu9mle-3000.preview.csb.app/ Build: https://modernage-web-git-main-modern-age-digital.vercel.app/ Thanks!

Hello! I wanted to know in terms of performance if there's any difference between using multiple useRef to select the elements of a react component and using the new feature gsap.context. Second if it's posibble I'd like to know what is it going on in the shadows, how is that the library makes sure that the strings I pass which are inside the parent ref are getting targeted. Is there somewhere I could read about it?

Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"? Caja de arena: https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js

I'm a beginner at GSAP. I have a complex SVG which runs perfectly in HTML. I'm trying to convert it into React by using GSAP. How can I convert the HTML SVG in react? Here's the link to HTML SVG: https://codesandbox.io/s/demo-svg-html-esf3dc?file=/index.html While you put hover over the circle it is animated. Here's the Link to my React App: https://codesandbox.io/s/framer-motion-svg----3333-zcvdk1?file=/src/components/MainSVG.js I try to put all curves parents' id in the motion path. I got an error. Now as you can see I just put only 1 path id in the motion path and all works like a mess. Here's a JS function but I don't know where and how to add that in react. Maybe if I add that to my code it will work. const existElementId = (e) => { return document.getElementById(e) } existElementId("circle" + 1) for (let i = 1; null != existElementId("circle" + i); i++) { console.log(existElementId("circle" + i)) let tl = gsap.timeline({ repeat: -1 }); tl.to("#dot" + i, { duration: document.querySelectorAll("#curve" + i + " path")[0].getTotalLength() / 200, ease: "none", motionPath: { path: "#curve" + i + " path", align: "#curve" + i + " path", alignOrigin: [0.5, 0.5], } }); tl.pause() existElementId("circle" + i).onmouseover = () => { tl.play() } existElementId("circle" + i).onmouseleave = () => { tl.pause().time(0) } } I'm expecting to get any solution/idea to make it like the index.html file.

Is it possible to create that by code using GSAP?

Hi there! I'm really in love with the new GSAP Context! It's really cool with working with React! When i add timelines with `context.add()` I get a typescript error because the method does not exist as a property of the context object. So the question is: How do I declare a type in typescript (and GSAP) that I intend to add a specific timeline method to the GSAP context? Here's an example: // Borrowing this context hook from the docs @see: https://greensock.com/react-advanced#useGsapContext export function useGsapContext<T extends HTMLElement = HTMLDivElement>( scope: RefObject<T>, // eslint-disable-next-line @typescript-eslint/no-empty-function context: gsap.ContextFunc = () => {}, ) { // eslint-disable-next-line react-hooks/exhaustive-deps const ctx = useMemo(() => gsap.context(context, scope), [scope]); return ctx; } I see that the return types for context are: interface Context { [key: string]: any; selector?: Function; isReverted: boolean; conditions?: Conditions; queries?: object; add(methodName: string, func: Function, scope?: Element | string | object): Function; add(func: Function, scope?: Element | string | object): void; ignore(func: Function): void; kill(revert?: boolean): void; revert(config?: object): void; clear(): void; } Now I'm adding a method to the context like so: // Init the gsap context const ctx = useGsapContext(wrapperRef); // Adds the timeline method to the context. This useEffect runs only once after initial render useEffectOnce(() => { ctx.add("newTab", (newIdentifier: string, oldIdentifier: string) => { const { current: wrapperEl } = wrapperRef; if (!wrapperEl) return; const tl = gsap.timeline(); if (oldIdentifier) { tl.to(`[data-tab="${oldIdentifier}"]`, { duration: 0.5, scale: 0.9, autoAlpha: 0, }); } tl.fromTo( `[data-tab="${newIdentifier}"]`, { scale: 1.2, autoAlpha: 0, }, { scale: 1, autoAlpha: 1, }, ); }); }); // on state update - uses the timeline we added to the context useUpdateEffect(() => { // Using the method added to context (this works!) But typescript complains this method doesn't exist if ("newTab" in ctx && typeof ctx["newTab"] === "function") { ctx.newTab(activeValue.active, activeValue.prev); } }, [activeValue]); So the timeline works as expected which is great... but I get the following error which is expected because typescript doesn't know there is a "newTab" property on the context object

When the page is reloaded, the animation is not performed. What is the problem? const array = [ { title: "Ref Element 1" }, { title: "Ref Element 2" }, { title: "Ref Element 3" } ]; export function Slider() { const titleH1Refs = useRef([]); titleH1Refs.current = []; //checking for an existing element in an array const addToRefsTitleH1 = el => { if (el && !titleH1Refs.current.includes(el)) { titleH1Refs.current.push(el); } }; //perform animation for all array elements useLayoutEffect(() => { titleH1Refs.current.forEach((element) => { gsap.from(element, { opacity: 0, y: 20, ease: Expo.easeInOut }) }) }, [titleH1Refs.current]); return ( <section className="container"> {array.map((element) => ( <div className="element" ref={addToRefs}>{element.title}</div> ))} </section> ); }

Hello, First of all, I want to say that GSAP has been a fantastic product that has solved many problems for me. I really enjoy using it for my projects! Lately, I started to use scrollTrigger with React and I noticed a strange behaviour. In my minimal codesandbox example, I designed it so that the scrollTrigger is only allow to slide the "door" div to the right during onEnter on the first time only. I am using React state in "iterCount" to prevent the door div from triggering any subsequent time. However, when I console.log the iterCount state, it appears that the scrollTrigger never received the updated iterCount after it was incremented by the onComplete event. Meanwhile, the iteration count is correctly incrementing in the React App itself in the counter at the top of the page. What is missing here? https://codesandbox.a/s/gsap-updating-state-hooks-sliding-door-xucoo0

Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js