Search the Community

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

Hi, I'm learning how to use scrolltrigger in react but, for some reason, the code works weird as you can see in the video. If I use the same code on codepen everything works as it should. I searched for a solution on google and here on the forum but couldn't find anything, please help me to understand import { useEffect } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import "./App.css"; gsap.registerPlugin(ScrollTrigger); function App() { useEffect(() => { const tl = gsap.timeline({ scrollTrigger: { markers: true, trigger: ".space2", start: "top center", scrub: 2, toggleActions: "restart none none none", pin: ".box", }, }); tl.to(".box", { x: 1000, duration: 8, }); }, []); return ( <div className="App"> <div class="space1"></div> <div class="wrap"> <div class="box"></div> </div> <div class="space2"></div> </div> ); } gsap.mp4

Hello everyone, I tried to search the forum but I didn't find any project regarding horizontal scroll done in NextJs, could someone kindly point me to it? Thank you very much and have a nice day

https://codesandbox.io/p/sandbox/gsap-and-fixed-positioning-test-forked-92gisp?selection=[{"endColumn"%3A32%2C"endLineNumber"%3A21%2C"startColumn"%3A32%2C"startLineNumber"%3A21}]&file=%2Fpages%2Findex.tsx&workspace=%7B%22activeFileId%22%3A%22cl8skx9ay000hlpge4cua49bz%22%2C%22openFiles%22%3A%5B%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22sidekickItems%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22cl9do5h5900gq496uufxj1u33%22%2C%22isMinimized%22%3Afalse%7D%5D%7D Hi, I need to explore using ScrollTrigger.start and ScrollTrigger.end properties, but they don't log the correct values; however, if I log the entire ScrollTrigger object, I see the correct start and end values. How can I solve this to get the correct values?

Hi there, New here (also new with gsap/react); I have made a side bar that slides out from the right side, I got the slide in animation to work but can't use .reverse() to reverse that animation. It immediately resets back to xPercent: 100 , instead of animating. Anyone here able to give me any pointers on how I should proceed? Small code snippet: const [menuOpen, setMenuOpen] = useState<boolean>(false); const [toggle, setToggle] = useState<boolean>(false); const handleToggle = () => { setToggle(!toggle); setMenuOpen(prev => !prev); }; const tl = gsap.timeline({ paused: true }); useEffect(() => { tl.fromTo('.hamburger__overlay', { xPercent: 100, duration: 1, }, { xPercent: 0, duration: 1, } ).reverse() tl.reversed(!toggle); }); (Dont mind the styling it's just a quick demo ) CodeSandbox link: https://codesandbox.io/s/sidebar-y45kf1

Hello! I'm trying to get a React component to fade in and out smoothly. I don't understand what to do next. Help me please

Hi, i tried to use, Gsap Flip to filter a grid of elements. The filter is inserted in the page in a fixed position so I can filter the grid from any position of the scroll. The strange thing that happens is that if I filter the grid with the scroll positioned at the bottom of it, the page will be scrolled up. I also tried to give a fixed height to the grid container, to avoid the bug, but the same thing happens. Is it a problem with Flip or am I using it wrong? https://codesandbox.io/s/shy-fire-3j0xc5

Hi all, I am new to gsap and this library has been fantastic so far. I was looking to recreate the following effect where you click an image, and it flips to the corresponding page. https://dribbble.com/shots/17535054-Homepage-Animation-for-Melbourne-Wooden-Showroom After doing a bit of digging, I thought I could use the following demo below as a base to toggle between component states. https://codepen.io/GreenSock/pen/OJzRdBj To start, I thought it would be best to observe how the component would behave when used multiple times within another component, like a list. Here is where I'm at: https://codesandbox.io/s/gsap-flip-react-test-t3odk8?file=/src/App.js I expected there to be some problem with the states, but I'm not too sure why clicking on any of the three list items only triggers a flip from the last item in the list. It would be super helpful if someone could help me with this, or point me in any direction if this is not the ideal way to approach this. Please let me know if I can provide any additional information. Thank you in advance.

Hello everyone, This is a reformulation of a topic that I created a few days ago. I am creating a new one here because I think it is more a ScrollTrigger+React-related problem and that it might benefit from being referenced as such. Context There are two consecutive "sections" that are both a 100vw/100vh. Each section is a React component (in the CodeSandbox below, they're called respectively WorkOverview and HomeAbout). They both get pinned one after the other. Problem The second element gets pinned too early, exactly as if the padding of the first section's .pin-spacer wasn't taken into account. The weirdest thing is that it doesn't happen all the time (but must of the time). Please note that (1) the ScrollTriggers are created in the order they happen on the page and that (2) it is not caused by any asynchronously-loaded content on what the sections' sizing might rely (images are inside a pre-sized container). Here's a video that illustrate the problem: Here's the CodeSandbox link https://codesandbox.io/s/clever-rhodes-16ic1. Note: if you don't see the problem, refresh the page 1 or 2 times. Thanks in advance for you precious help!

My goal is update a Three JS scene (colors, camera position, material properties, etc.) based on state properties set by the timeline. My scene is rendered inside of the BlobScene component which accepts an intensity prop. In the sample below, I'd like to update the intensity as the timeline is scrubbed which then updates the light intensity of my scene. In the pinned section, there are two columns: the left column contains text that will be translated into view and the right column contains the BlobScene. My ultimate goal is to change the color of the blob for each corresponding text section. So when the user scrolls from the red section to the green section, for example, the blob mesh would smoothly transition it's material color from red to green. Am I going about this the wrong way? I can create a minimal demo if needed. import React, { useState, useEffect } from "react" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import BlobScene from '../components/blob-scene' function Index() { let [intensity, setIntensity] = useState({value: 1.5}) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Verticals Pinned Section Story const tl = gsap.timeline() tl.from(".red", {y: "100%"}) .from(".green", {y: "100%"}) .from(".blue", {y: "100%"}); // PROBLEM LINE tl.to(intensity, { value: setIntensity(0.5) }) ScrollTrigger.create({ animation: tl, trigger: "#verticals", scroller: "#___gatsby", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1 }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => window.scroll.update()) ScrollTrigger.refresh() }, [intensity]); return ( <React.Fragment> <div className="page"> <section id="verticals" className="h-screen flex items-center relative w-full overflow-hidden"> <div className="grid grid-cols-2 gap-6 h-full w-full"> {/* Grid Column 1 */} <div className="flex items-center"> <div className="relative w-full overflow-hidden h-80"> <div className="panel absolute h-full w-full red bg-red-500 text-black"> <h2>Panel 1</h2> </div> <div className="panel absolute h-full w-full green bg-green-500"> <h2>Panel 2</h2> </div> <div className="panel absolute h-full w-full blue bg-blue-500"> <h2>Panel 3</h2> </div> </div> </div> {/* Grid Column 2 */} <div className="flex items-center"> <BlobScene intensity={intensity.value}></BlobScene> </div> </div> </section> </div> </React.Fragment> ) } export default Index

Can anybody guide me regarding how to use `gsap.fromTo( )` in react alongwith scrollTigger? I have following code: useEffect(() => { gsap.fromTo( imgwidCard.current, { scrollTrigger: { trigger: imgwidCard.current, scrub: 0.5, markers: true, start: "top 85%", }, }, {opacity: 0}, {opacity: 1} ) }) This is not working, it is giving `opacity:0` to the element but is not changing opacity from 0 to 1. Any help would be appreciated. Thank you

Hi guys. I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap. I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q The main overlay animation plays smoothly, but the menu items dont. I am trying to create a stagger effect for each MenuItem component. As you can see using useRef() hook only works only for the last component. When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple objects, but still I have no idea how to get a progressive fade for each component and I'm not even sure I'm using gsap in the correct way. What am I doing wrong? Thank you in advance, Matteo.

Hi, I am trying to animated section with scroll created as components in React. You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone). In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why... Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. I would greatly appreciate is you could take a look at the code pen and point out my mistakes. Thank you!

Hello! I'm working with Next.js and have run into a logistical issue with Refs. https://codesandbox.io/s/nested-react-next-gsap-gvksxp ^^ In the sandbox I have my IndexPage mapping out a few items, problem being, almost half of the elements need animation, and this means doing const thing = useRef([]) thing.current = [] const addToRef = (el) => { if (el && !thing.current.includes(el)) { thing.current.push(el); } }; A bunch I have animated the text but targeting the rest of the stuff that needs tweens seems like a ton of work (unless I'm missing something) Is there a recommended approach for animating a bunch of children elements that are being mapped out? I'd love to use a ref on the container div and target down to any level with .children[i] or .querySelectorAll but this hasn't quiet panned out in my experiments. I appreciate the advice, please let me know if my demo needs adjusting or if I can clarify anything! Nye

Hello! I want to move the purple block along the path I've draw in the SVG. This is one section of my website which uses gsap all over the page. Rest of the page can be easily selected using the ref but when I use MotionPath, It throws Invalid scope and Target not found error. Here's the codesandbox: https://codesandbox.io/s/gsap-motionpath-react-bkscsf?file=/src/App.js Thank You!

Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property ?. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);

Here's the codesandbox: https://codesandbox.io/s/gsap-transition-snap-react-p421y5 I want the building to smoothly disappear when it hits the trigger point. Instead of animating, building just snaps to opacity: 0.

// Parent Component export default function ParentComponent() { const [title, setTitle] = useState('values'); const changeContent = (title) => { setTitle(title); } const bgRef = useRef(null); const mainRef = useRef(null); const bgTransitionRef = useRef(null); useEffect(()=>{ const tl = gsap.timeline(); tl.fromTo(bgTransitionRef.current, {y: 0, skewY: 0}, {y: "-120vh", skewY: 4, duration: 1.2, ease: "power4.inOut"}) .fromTo(bgRef.current, {filter: "brightness(3) grayscale(150%)"}, {filter: "brightness(1) grayscale(0%)", duration: 1.2}) .fromTo(mainRef.current, {y: 150, autoAlpha: 0}, {y: 0, autoAlpha: 1, duration: 1.2, ease: "power3.inOut"}, "<0.5") }) return ( <div className="parent-component"> <img className='bg-background' src="/assets/clouds.png" ref={bgRef} /> <div className="bg-transition" ref={bgTransitionRef} ></div> <ChildComponent changeContent={() => changeContent('values')} /> <div/> ) } // Child Component export default function ChildComponent(props) { return ( <div className="child-component" onClick={props.changeContent}> <h4>{props.title}</h4> </div> ) } Alrighty, so what's happening is that whenever I click the ChildComponent, it should run a function called 'changeContent'. It does change the content when I click it. But what it also does is that it restarts all of the GSAP animations. Why is it doing this? And how can I prevent it from happening?

Hi everyone, First of all, no need to tell you that the library is just amazing. I just discovered it and was going through the examples. I viewed the vido about the FLIP plugin and I have a question regarding the implementation in React. in Js, it is pretty simple to move element through the dom but i tried to make something similar in React and to be honest, I have no idea on how to move a component from 1 div to another. What I tried is to put the components 2 imes in the code and use a toggle state to show it in one place and remove it in the other but the Flip do not work. I suppose that GSAP consider that they are 2 different components Any guidelines on how to use Flip with React ? In all the samples that I have seen, the elements are moved within a common parent and it works just well For example, how to convert the flip example in this codepen to React? https://codepen.io/GreenSock/pen/ExyzePZ Thanks a lot for your advices. Best regards.

Hello, I'd like to use GSAP ScrollSmoother on top of ScrollTrigger (with some SlitText) but I have animation issue. I'm trying to use GSAP as a reusable component with React like the documentation here (section #reusable-animations) But it's not working well, the 1st animation is running smoothly but the other one are juste popping in the screen. As soon as I remove the ScrollSmoother.create(); the animations are good again. So definively something on ScrollSmoother side. Do you know what cause the issue? Thanks Alex

Hello, I have a list of component (parents), inside this these components there are others components (children). I have a on hover gsap animation on parents, but when I hover them the children width and height change like there is some propagation, and I just want the parents to be animated not the children. Here is the code, The parents : listSuppTmp.push(<ContainerSuppRef rstart={((res.data[j].U) - parseInt(res.data[j].taille) + 1)} rend={res.data[j].U + 1}> <SupportDiv onMouseEnter={(e) => onEnter(e, res.data[j].ID, res.data[j].taille)} onMouseLeave={(e) => onLeave(e, res.data[j].ID)} key={res.data[j].ID}> { await axios.get(`http://localhost:8888/api/support/cassette-type-conn/${res.data[j].supportID}`) .then(res => { //console.log(res.data) return <ContainerPorts data={res.data}></ContainerPorts> }) } </SupportDiv> <RefDiv ref={el => elemsRef.current[res.data[j].ID] = el}>{res.data[j].support_ref}</RefDiv> </ContainerSuppRef>) (This listSuppTmp.push is in a for loop) The children : function ContainerPorts (props) { if (props.data.type === 'Cuivre') { return ( <> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> <CuivrePort> <Port/><Port/><Port/><Port/><Port/><Port/> </CuivrePort> </> ) } return (<></>) } So in the children components, CuivrePort is a container of ports which are basically small cubes. On the 3 pictures, the first one is a parent that has not been hovered the 2nd it has been hovered the 3rd is a the normal behavior but empty and I want this with scaled children components inside Thanks in advance

When you use smooth-scrollbar, React and GSAP ScrollTrigger in multiple React components all animations stop working. Firstly I thought it's Gatsby issue but the same thing happens for pure React. Everything works well if you don't use smooth-scrollbar, also everything works well when you use smooth-scrollbar and store all scrollTrigger animations in one useEffect. But when you move them to other components then all animations stop working. Try to use my codepen example. Animations don't work but when you comment out scrollTrigger object from the "Other" component then it starts to work.

I have been trying to create a navbar animation where the navbar comes from top when clicked and goes back the exact same way but so far that is not how my code is behaving. On clicking the back button the navbar simply disappears. Here is the codesandbox link https://codesandbox.io/s/misty-star-ncl3z

Hi Team! I'm trying to setup a simple animation with a boat moving along a path as the user scrolls down the page. I had the boat moving along the path correctly, but then I added the next step which was to pin the whole map so you could actually see the full animation before it scrolls off-screen - and this proved kinda tricky! I went through a few different iterations of path-mismatch, and now the boat does appear to be moving along a line of motion, but it's as if the path is rotated 90 degrees and the boat goes bouncing around towards the left instead of going down the map along the dotted line. I must be calling the motionPath before the asset has loaded or something, right? Any other suggestions where I am going wrong will be massively appreciated! Codepen here (brown box in place of the boat) https://codepen.io/Allanw/pen/jOarMaO

Hello everyone, I am new to using GSAP, so I need a little bit of help here because I am lost on where to start. I found this cool effect (https://rpj.bembi.dev/) that uses this package: react-particles-js. Can anyone instruct me on how to replicate this effect in React using GSAP please? Thank you!