Jump to content

Search the Community

Showing results for tags 'react'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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.
  2. 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
  3. 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.
  4. Hi guys, I am currently rebuilding my website and i am asking myself what is the bestway to share one timeline through multiple components ? let's say i have this architecture --Layout ----Header ----Component1 --------Component2 --------Component3 ----Footer And i want part of my header timeline starting after the one executed in component3 ? Currently i am using context but it feels a bit strange to me Provider.js const [globalTimeline, setGlobalTimeline] = useState( gsap.timeline({ paused: true }) ) // Global Timeline for animation <myContext.Provider value={{ globalTimeline, setGlobalTimeline: tl => setGlobalTimeline(tl), }} > {children} </myContext.Provider> Layout.js useEffect(() => { globalTimeline.addLabel('start'') globalTimeline.play() }, []) I call my context in every component and add my animation to the globalTimeline. Thank you
  5. 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?
  6. 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;
  7. 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
  8. 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.
  9. 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
  10. 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
  11. 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!
  12. 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?
  13. 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
  14. 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.
  15. Is it possible to create that by code using GSAP?
  16. Hi, im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case: Scroll component: https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx Live demo: https://qq11t.sse.codesandbox.io/ I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way. Thx, for the support
  17. React and GSAP can be a powerful combination, as evidenced by many of the sites in our showcase. GSAP is a framework-agnostic animation library, you can write the same GSAP code in React, Vue, Angular or whichever framework you chose, the core principles won't change. There are some React-specific tips and techniques that will make your life easier though, let's take a look... This is not a tutorial, so feel free to dip in and out as you learn. Why GSAP? GSAP is so popular because it delivers unprecedented control and flexibility, and that's exactly what award-winning developers want. You can reach for GSAP to animate anything — from simple DOM transitions to SVG, Three.js, canvas or WebGL, even generic JavaScript objects — your imagination is the limit. Most importantly, you can rely on us. We obsess about performance, optimizations and browser compatibility so that you can focus on the fun stuff. We've actively maintained and refined our tools for over a decade. If you get stuck, our active and friendly forum community is there to help. A basic understanding of GSAP and React is assumed. 🤷🏼‍♀️ If you're just getting going with React, this tutorial from the React team is a great place to start. 🤔 Need a GSAP refresher? Take a break and read the getting started guide which covers tweens and timelines. 🥳 Feeling confident? Skip straight to part 2 - GSAP + React, advanced animation techniques. Online playgrounds Get started quickly by forking one of these starter templates: CodePen CodeSandbox CodeSandbox + Bonus Plugins Create a new React App If you prefer to work locally, Create React App provides a comfortable setup for experimenting with React and GSAP. To create a project, run: npx create-react-app gsap-app cd gsap-app npm start Once the project is set up we can install GSAP through npm, npm i gsap npm start Then import it into our app. import React from "react"; import { gsap } from "gsap"; export default function App() { return ( <div className="app"> <div className="box">Hello</div> </div> ); } More detailed information about getting started with React Additional GSAP installation documentation Animating on interaction Let's start with a common challenge - animating on a user interaction. This is pretty straightforward with React. We can hook into callbacks to fire off animations on certain events like click or hover. In this demo the box is scaling up onMouseEnter, and down onMouseLeave. See the Pen React Tutorial 1d by GreenSock (@GreenSock) on CodePen. But what if we want an animation to fire after the component mounts, without a user triggered callback? Triggering animation on mount - useLayoutEffect() The useLayoutEffect() hook runs immediately AFTER React has performed all DOM mutations. It's a very handy hook for animation because it ensures that your elements are rendered and ready to be animated. Here's the general structure: const comp = useRef(); // create a ref for the root level element (we'll use it later) useLayoutEffect(() => { // -- ANIMATION CODE HERE -- return () => { // cleanup code (optional) } }, []); // <- empty dependency Array so it doesn't re-run on every render! Don't forget that empty dependency Array! If you omit that, React will re-run the useLayoutEffect() on every render. Targeting elements with Refs In order to animate, we need to tell GSAP which elements we want to target. The React way to access DOM nodes is by using Refs. Refs are a safe, reliable reference to a particular DOM node. const boxRef = useRef(); useLayoutEffect(() => { // Refs allow you to access DOM nodes console.log(boxRef) // { current: div.box } // then we can animate them like so... gsap.to(boxRef.current, { rotation: "+=360" }); }); return ( <div className="App"> <div className="box" ref={boxRef}>Hello</div> </div> ); However - animation often involves targeting many DOM elements. If we wanted to stagger 10 different elements we'd have to create a Ref for each DOM node. This can quickly get repetitive and messy. So how can we leverage the flexibility of selector text with the security of Refs? Enter gsap.context(). gsap.context() is your best friend! gsap.context() provides two incredibly useful features for React developers, the option of using scoped selectors and more critically - animation cleanup. GSAP Context is different than React Context. Scoped Selectors We can pass a Ref into context to specify a scope. All selector text (like ".my-class") used in GSAP-related code inside that context will be scoped accordingly, meaning it'll only select descendants of the Ref. No need to create a Ref for every element! Here's the structure: const comp = useRef(); // create a ref for the root level element (for scoping) const circle = useRef(); useLayoutEffect(() => { // create our context. This function is invoked immediately and all GSAP animations and ScrollTriggers created during the execution of this function get recorded so we can revert() them later (cleanup) let ctx = gsap.context(() => { // Our animations can use selector text like ".box" // this will only select '.box' elements that are children of the component gsap.to(".box", {...}); // or we can use refs gsap.to(circle.current, { rotation: 360 }); }, comp); // <- IMPORTANT! Scopes selector text return () => ctx.revert(); // cleanup }, []); // <- empty dependency Array so it doesn't re-run on every render // ... In this example, React will first render the box and circle elements to the DOM, then GSAP will rotate them 360deg. When this component un-mounts, the animations are cleaned up using ctx.revert(). See the Pen React & GSAP Starter Template by GreenSock (@GreenSock) on CodePen. 🧠 deep dive... Refs or scoped selectors? show more... Targeting elements by using selector text like ".my-class" in your GSAP-related code is much easier than creating a ref for each and every element that you want to animate - that’s why we typically recommend using scoped selectors in a gsap.context(). An important exception to note is if you’re going to be nesting components and want to prevent against your selectors grabbing elements in child components. In this example we've got two elements animating in the main App. A box targeted with a scoped class selector, and a circle targeted with a Ref. We've also nested another component inside our app. This nested element also has child with a class name of '.box'. You can see that the nested box element is also being targeted by the animation in the App's effect, whereas the nested circle, which was targeted with a Ref isn't inheriting the animation. See the Pen React & GSAP Starter Template by GreenSock (@GreenSock) on CodePen. Cleaning Up useLayoutEffect() provides us with a cleanup function that we can use to kill animations. Proper animation cleanup is crucial to avoid unexpected behaviour with React 18's strict mode. This pattern follows React's best practices. gsap.context makes cleanup nice and simple, all GSAP animations and ScrollTriggers created within the function get collected up so that you can easily revert() ALL of them at once. We can also use this cleanup function to kill anything else that could cause a memory leak, like an event listener. useLayoutEffect(() => { const ctx = gsap.context(() => { const animation1 = gsap.to(".box1", { rotation: "+=360" }); const animation2 = gsap.to(".box2", { scrollTrigger: { //... } }); }, el); const onMove = () => { //... }; window.addEventListener("pointermove", onMove); // cleanup function will be called when component is removed return () => { ctx.revert(); // animation cleanup!! window.removeEventListener("pointermove", onMove); // Remove the event listener }; }, []); gsap.matchMedia() uses gsap.context() under the hood, so you can just call revert() on your matchMedia instance instead for cleanup (no need to combine them). Reusing components Within a component based system, you may need more granular control over the elements you're targeting. You can pass props down to children to adjust class names or data atrributes and target specific elements. React advises to use classes purely for styling and data attributes to target elements for JS functionality like animations. In this article we'll be using classes as they're more commonly understood. See the Pen Forwarding refs by GreenSock (@GreenSock) on CodePen. Creating and controlling timelines Up until now we've just used refs to store references to DOM elements, but they're not just for elements. Refs exist outside of the render loop - so they can be used to store any value that you would like to persist for the life of a component. In order to avoid creating a new timeline on every render, it's important to create the timeline inside an effect and store it in a ref. function App() { const el = useRef(); const tl = useRef(); useLayoutEffect(() => { const ctx = gsap.context(() => { tl.current = gsap .timeline() .to(".box", { rotate: 360 }) .to(".circle", { x: 100 }); }, el); }, []); return ( <div className="app" ref={el}> <Box>Box</Box> <Circle>Circle</Circle> </div> ); } This will also allow us to access the timeline in a different useEffect() and toggle the timeline direction. See the Pen React Tutorial 2f by GreenSock (@GreenSock) on CodePen. Controlling when React creates our animation. If we don't pass a dependency Array to useLayoutEffect(), it is invoked after the first render and after every update. So every time our component’s state changes, it will cause a re-render, which will run our effect again. Typically that's wasteful and can create conflicts. We can control when useLayoutEffect should run by passing in an Array of dependencies. To only run once after the first render, we pass in an empty Array, like []. You can read more about reactive dependencies here. // only runs after first render useLayoutEffect(() => { const ctx = gsap.context(() => { gsap.to(".box-1", { rotation: "+=360" }); }, el); }, []); // runs after first render and every time `someProp` changes useLayoutEffect(() => { const ctx = gsap.context(() => { gsap.to(".box-2", { rotation: "+=360" }); }, el); }, [someProp]); // runs after every render useLayoutEffect(() => { const ctx = gsap.context(() => { gsap.to(".box-3", { rotation: "+=360" }); }, el); }); See the Pen React Tutorial 1b by GreenSock (@GreenSock) on CodePen. Reacting to changes in state Now that we know how to control when an effect fires, we can use this pattern to respond to changes in our component. This is especially useful when passing down props. function Box({ children, endX }) { const boxRef = useRef(); // run when `endX` changes useLayoutEffect(() => { const ctx = gsap.context(() => { gsap.to(boxRef.current, { x: endX }); }); return () => ctx.revert(); }, [endX]); return ( <div className="box" ref={boxRef}> {children} </div> ); } See the Pen React Tutorial 1c by GreenSock (@GreenSock) on CodePen. We hope this article was helpful - If you have any feedback please leave us a comment below so we can smooth out the learning curve for future animators! Read the next article.
  18. 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
  19. 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
  20. 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> ); }
  21. 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
  22. Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance
  23. // MySplitText.tsx const ref = useRef<HTMLDivElement>(null) const splitText = useRef<SplitText>() useEffect(() => { let ctx = gsap.context(() => { splitText.current = new SplitText('.text',{ type: 'chars' }) },ref) },[]) <div ref={ref}> <p className="text">My Text</p> </div> /** * Root component- App.tsx */ <div> <MySpliteText/> <p className="text">My Text at root component</p> // <-- this is got selected </div> Does someone also experience this scenario? The selector inside the context is leaking outside its scope, or is there something wrong with instantiation of the `SplitText` plugin? I have to pass it to a `ref` so I can use it on a callback animation.
  24. I keep getting this occasional issue on page refresh - the local development environment the animations are not getting triggered on the component is on view - and messages on the console Could my code implementation on React be causing the issue? https://codesandbox.io/s/react-gsap-2lmcof?file=/src/data.js I was not able to reproduce the issue on codesand box - but it's a simplifcy version how i'm implenenting Gsap on react / next.js app. I'm new to width GSAP but I'm super excited to build more animations with it. Thank you
  25. Hi everyone, Im trying to use ScrollTrigger with Next.js. I just coppied https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js but my example not work like that. boxC moving a little bit between start and end position, after it jumps 150-200px and it moves again with scrolling. Thanks Screen Recording 2022-11-10 at 21.45.18.mov