Search the Community

I'm facing a problem with animate html inside foreignObject. when I click the button it animates. it works normally on desktop and Android devices and is debug responsive with iPhone on the Chrome dev tool. but when I'm testing in a real iPhone. it causing problems. the text and jumping big above the SVG and this is not i want. how can i fix it ? Please help me. this is the demo in codesandbox: animate html ìn foreignObject - CodeSandbox

Hi everyone, I am just starting with GSAP and React and want to adopt best practices from the beginning. I would appreciate your insights on my approach. My question concerns triggering an animation before a component re-renders, similar to the discussion in this topic. However, my scenario involves initiating the animation with a button's onClick event. Currently, I am using forwardRef and useImperativeHandle in React, which allows me to activate a function from a button in a separate component. This function triggers a fade-out animation in the component where the animation is defined. In the animation's onComplete callback, I modify a variable that is part of the prop in the main component, causing it to re-render. Is there a better way to achieve this effect? Also, if you have any comments or suggestions after reviewing my code, I would be extremely grateful to hear them. Here is link to the stackblitz with the minimal demo: https://stackblitz.com/edit/stackblitz-starters-v1vstg?file=src%2Fcomponents%2Fplaceholder.js PS. I forgot mention that I want this effect to works when the buttons are in different component than the animated content. I already add this functionality to the demo.

Hi, I have a Problem with my project on Vercel and GSAP Bonus Plugins. I don't know if i can paste the code in CodePen since it's Typescript and Next.js so i added some screenshots of the code. Locally everything works fine, but on Vercel i get this Building Log Errors: I have generated a PRIVJS_TOKEN and installed all Bonus Plugins via npm locally. In the console of the browser i get this errors:

I have a pinned section in my page, which makes the other Scroll triggers I have in different child components have their starting positions inaccurate. I tried refreshing the Scroll trigger(using ScrollTrigger.refresh()) in the main page(file) but the issue remained. Also I want to know if there is a way I can pass down an instance of Scroll trigger and Gsap to my other components, so If i refresh that one instance, it updates everywhere, or is there a better way to handle having multiple gsap and scroll triggers in different components but still being able to control them from the main page? Also I want to know if the better approach is to write all my animations in one useEffect with all the jsx in one page(file) or have some of the animations for different parts of the page as components which include their respective jsx. So pretty much everything in one page or components style ? I ask this because the component approach has been a headache for me, because one way or another the starting points end up inaccurate. I would apperciate if someone could help with a direction I could take. This is a simplified version https://stackblitz.com/edit/vite-react-tailwind-fpc1wz?file=src/App.jsx where I tried to refresh a child component but it didn't work

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

I am working on a navigation menu that uses a dot underneath the active link. I want to animate the dot by reparenting it using Flip when a user navigates to a different page. I found a helpful example of reparenting using Flip in a react project created by someone here, and I forked it. My fork is here: https://stackblitz.com/edit/vitejs-vite-9pac1m?file=src%2FApp.jsx I have added a new onClick handler `handleParentClick` that is triggered by each parent link. The handler gets the index of the link from a data attribute. I expected this to work, but each time I click a parent I get the following error: react-dom_client.js?v=14fad21f:16659 Uncaught TypeError: Cannot read properties of null (reading '_gsap') at Object._getCache2 [as getCache] (gsap.js?v=c3ccde3e:132:17) at ElementState2.update (gsap_Flip.js?v=e3486289:1024:101) at new ElementState2 (gsap_Flip.js?v=e3486289:1016:10) at gsap_Flip.js?v=e3486289:890:14 at Array.map (<anonymous>) at FlipState2.update (gsap_Flip.js?v=e3486289:889:39) at new FlipState2 (gsap_Flip.js?v=e3486289:883:12) at _parseState2 (gsap_Flip.js?v=e3486289:592:65) at Function.from (gsap_Flip.js?v=e3486289:1246:27) at App.jsx:32:10 I'm not sure how to troubleshoot this error and hoping someone can point me in the right direction.

I have a component with dynamic id usinguseId()hook from react. it generates a string that contains a colon ":R1fakq:" something similar to this. then I will use this id to trigger a scrollTo with ScrollToPlugin but it throws an uncaught error. I tried manually setting the id with a colon character and it render the same issue.

Hi Team, What I'm trying to achieve The overall effect is curvy timeline (vertical) that is revealed as the user scrolls down the page. As the user scrolls down the page, the curved line is drawn, dots are added to the line and content is revealed. The content is sourced from a CMS (rows), there are unknown number of rows, and the content in each row can vary in size/height The Tech This is all being done in React My approach I've broken the curvy line into multiple sections: Top - The start of the timeline (Data row 1) Middle 1 - The first Section (Data row 2) Middle 2 - The second section (data row 3) ...n middles sections Bottom - The end of the timeline Each is its own component which is responsible for the animation. Where I'm struggling All this, for the most part works OK. Where I'm getting unstuck is: 1) Nicely transitioning from row to row (leading dot on the motion path) 2) On scroll up removing the lead dot. I have a demo in stackbitz, I hope this is ok? I realise there's a bit going on in this so let me know if I need to simplify further. https://stackblitz.com/edit/react-ahd2tq?file=src%2FApp.js

I'm trying to convert the following React component from the codepen(Sorry, I couldn't get it to run there) to GSAP. I built it using css animations(with tailwindcss). My code right now depends on the Indextracker state. This tracks which images is visible at the moment. Whenever it changes, the pages refreshes and the tailwind classes change(these set the position/rotation of the element) and therefor animate it. I know that this is quite janky but that's why i'd like to use GSAP. I'm struggling to figure out where to place my gsap animations: How can I mix this state management with GSAP? Can I just put the animations in my forwardClick and backwardClick functions and would they then persist between rerenders? Here's a gif of what it looks like at the moment.

https://stackblitz.com/edit/react-942bze?file=src%2Fstyle.css Having a little trouble with useGsap hook.I am not able to make the flip animation work using useGsap otherwise it works fine.

Hello, I'm not a pro, so forgive my vocabulary if it's not accurate... I am trying to find out how I could use GSAP to animate the value of a state managed by Zustand (React state management). Here is how basic Zustand works: Creating the store: const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) Binding components: function BearCounter() { const bears = useStore((state) => state.bears) return <h1>{bears} around here...</h1> } function Controls() { const increasePopulation = useStore((state) => state.increasePopulation) return <button onClick={increasePopulation}>one up</button> } Let say I want to tween the value of the state bears from 0 to 100. I would like to understand how to do it using 2 different approaches: how would you do it using a method within the store? how would you do it using a function within the component? Or are those approaches wrong? Thank you!

Hello I have a list of links and wanted to create a hover effect that animates all elements in some way (ie reduce opacity) but do something different on the hovered element (ie animate a contained span). I have created a pen with a React functional component that uses gsap. In essence I am doing the following: - Create 2 lists of elements (hovered element, non hovered elements) - Create 2 gsap timelines - Trigger those timelines on mouseover and on mouseleave. I have 1 problem and 1 question. Question: am I using best practices? I have wrapped the code inside a gsap context and I'm reverting the context when the component lifecycle ends. However I have 2 eventlisteners that I am not sure if thery are removed when lifecycle of component ends. Problem: animation only happens once for each element. How can i persist the timeline effects? Any help and suggestions would be greatly appreciated. Thank you

So hi, im trying to get used to the new hook useGSAP and gsap.context from GSAP, so since i started with useEffect and useLayoutEffect, i allways had the same issue that the horizontal scrooll section has a conflict whit smootscroll, all other animations are working as spected. So here is my app component: import { useGSAP } from '@gsap/react'; import gsap from 'gsap-trial'; import ScrollSmoother from 'gsap-trial/ScrollSmoother'; import ScrollTrigger from 'gsap-trial/ScrollTrigger'; import { useRef } from 'react'; import BrandsSection from './BrandsSection'; import CodeSection from './CodeSection'; import ContactSection from './ContactSection'; import IntroSection from './IntroSection'; import Navbar from './Navbar'; import PresentationSection from './PresentationSection'; import ProjectSection from './ProjectSection'; import SkillSection from './SkillSection'; import { StyleProvider } from './context/NeumorphicStylesContext'; export const PortfolioApp = () => { const componente = useRef(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); useGSAP(() => { const ctx2 = gsap.context(() => { const smoother = ScrollSmoother.create({ smooth: 2, effects: true, normalizeScroll: true, }); ScrollTrigger.create({ trigger: ".box-c", pin: true, start: "10% center", end: "+=1750", markers: true }); ScrollTrigger.create({ trigger: ".box-b", pin: true, start: "45% center", end: "+=1750", markers: true }); }, componente); return () => ctx2.revert(); }, { scope: componente }); return ( <StyleProvider> <Navbar /> <div id="smooth-wrapper" ref={componente}> <div id="smooth-content" > <IntroSection /> <PresentationSection /> <ProjectSection /> <SkillSection /> <BrandsSection /> <CodeSection /> <ContactSection /> </div> </div> </StyleProvider> ); }; and here is the horizontal section wich fastly goes to other sectios like it doesnt wanted to reproduce the animation, and it works when smootscrolling is not active: import { useGSAP } from '@gsap/react'; import gsap from 'gsap-trial'; import { useRef } from 'react'; import { CarrouselProjects } from './CarrouselProjects'; import { DescriptionProject } from './DescriptionProject'; import style from './projects.module.scss'; const ProyectSection = () => { const container = useRef(); useGSAP(() => { const slider = document.querySelector(".container") const ctx = gsap.context(() => { const panels = gsap.utils.toArray(".panel"); gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: "none", scrollTrigger: { markers: true, trigger: ".container", pin: true, scrub: 1, snap: 1 / (panels.length - 1), end: () => "+=" + slider.offsetWidth } }); }, container); return () => ctx.revert(); }, { scope: container }); return ( <div ref={container}> <div className="container"> <div className="description panel"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> <div className="panel red"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> <div className="panel orange"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> <div className="panel purple"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> </div> </div> ); }; export default ProyectSection; i would really aprecietted your help and i will try to replacate the issue on codesandbox if this information its not enough

Please Help Me recreate The awesome animation In React https://www.nathansmith.design Im stuck at infinite vertical scrolling and also the scrollup effect on main text ? I tried to understand with context of this post but it was too hard to do so because im new to the concept : Please do help me out

Hi there! We just completed a major site redesign featuring ScrollTrigger in several modules. It's been awesome, thanks to all involved in making this happen! One issue that came up is illustrated in the Codepen. We have a few modules that "expand" with interaction, like the green Module 2. The horizontal scroll module works great, but if the module above is expanded, it throws off the start/end positions of the trigger. My initial solution was to add a resizeObserver on the height of the body, that would trigger a window.resize event. This was effective in conjunction with MatchMedia, but it's global and is interrupting other animations that are happening on-screen while the body size is changing. What's the best (and more "componentized" ) way to recalculate the trigger when its position changes like that? Note: I don't think it's necessarily relevant, but we are using React in a sort of unique set up... we are working within a modular CMS, so each module is its own React app, similar to how the Codepen is set up. Much thanks!

Hello everyone, I have problems with ScrollTrigger in React and Next.js ecosystem from time to time. There are times when ScrollTrigger does not update itself when the page content changes for any reason, and this causes the placement of triggers to be broken. In the solutions I encountered in the forum, it is generally recommended to run the ScrollTrigger.refresh() method after the content change, but there may not always be an event etc. that coincides with that exact moment. In short, I'm wondering if anyone can recommend a robust ScrollTrigger implementation method in CSR libraries like react or isomorphic frameworks like Next.js? Where should it be init, when should it be refreshed, is there a global solution you use for refresh, etc.? For example, I use a global resize detector when working with react and I don't have much problems, but I feel like there should be a much more logical way because when the window height changes because a new tab is opened in safari, it can unnecessarily refresh and cause jumps on the page, etc. Any suggestions would be appreciated.

Hello GSAP community, I'm working on a React project where I'm attempting to create a smooth page transition with GSAP and React Router. The specific effect I aim to achieve is this: when a user clicks on a button (which is text with a background image), I'd like the image within the text to grow and eventually become the background image of the new route. Here's the scenario in detail: - I have a list of clickable project cards on the homepage, each with text over a background image. - when clicking one of these text elements, I would like the background image to expand, filling the entire screen and then transitioning into the background of the next page So far, I have tried animating the scale of the element . However, I am running into two main issues: 1. The `scale` property does not seem to be the correct approach for making the image become the background smoothly. 2. The transition to the other route comes off as abrupt and I'm struggling to integrate the animation seamlessly into the page change. I would greatly appreciate any advice on how to create a seamless transition where the clipped background image expands to fill the screen and serves as a connector between the two routes. Here's a link to a current sample of the project on CodeSandbox: Codesandbox Exemple

I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console: App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo') This is the code: import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; import { ReactLenis, useLenis } from "@studio-freight/react-lenis"; gsap.registerPlugin(ScrollTrigger); const App = () => { const lenis = useLenis(({ scroll }) => { // called every scroll }); const [showSpan, setShowSpan] = useState(true); const mainTitleRef = useRef(null); const secondaryTitleRef = useRef(null); const wavingHandRef = useRef(null); const section1Ref = useRef(null); const section2Ref = useRef(null); useLayoutEffect(() => { pinSection(); animateTitles(); return () => { // Cleanup code when the component unmounts ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, []); // Empty dependency array to run once after the initial render const pinSection = () => { // Pin the section when it enters the viewport ScrollTrigger.create({ trigger: section1Ref.current, start: "top top", end: "1200 top", pin: true, markers: true, onLeave: () => { gsap.to(section1Ref.current, { opacity: 0, duration: 1, onComplete: scrollToSection2, }); // Set opacity to 1 when entering the trigger // scrollToSection2(); // gsap.add( function(){ scrollToSection2(); } ) }, onEnterBack: () => { gsap.to(section1Ref.current, { opacity: 1, duration: 1 }); }, }); }; const scrollToSection2 = () => { lenis.scrollTo(section2Ref.current, { duration: 5 }); }; As you can see scollToSection2 is a React function. Thank you for your help upfront!

Hi all, I'm new to GSAP and trying to wrap my head around the following problem: In react I have a state variable const [hitBottom, setHitBottom] = useState({ value: false }); I'm trying to figure out how to setup a scroll trigger and set that boolean to true, once the footer at the bottom of the page is in view, and reverse it to false once it leaves the viewport. I cannot find anything on how to change state variables in the docs and would appreciate a nudge in the right direction. Thank you! Here's what I tried doing: useEffect(() => { let tl = gsap.timeline({ scrollTrigger: { trigger: '#footer' } }); tl.fromTo( setHitBottom, { value: false }, { value: true } ).reverse(); }, []);

Hi there! I'm facing an issue with my scrollTrigger functionality. I have my website with 5 sections and I'm using gsap to jump to the next section and overlap it with the scroll, my problem is that now I need to add redirections in my navbar to each of those sections but the result is not good, I have to repeat my "goToSection" function multiple times to reach from section "2" to section "4" for example. So I want to achieve with one click and one function execution, scrolling to the desired section with no problem I will appreciate any help from you guys! Thank you very much. I drop here a minimal demo of the problem.

Hello, I have a projet on Nextjs with some GSAP for animations. I have created a simple Component for animate list of elements on scroll. But this time I need to make animation on scroll and when I click on "Voir plus". And I couldn't find how to achieve this behavior. If someone can help. Here is the codepen https://codepen.io/maxime-joyes/pen/poGVYzg Thanks

The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing I tried: timeline put in useRef gsap.context and subsequently revert Manually clear timeline using kill A simple example that also doesn’t work for me: Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/ Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again. (This post was completely translated using google translator, sorry if anything is not clear) import gsap from 'gsap' import { useEffect } from 'react' export function Component() { useEffect(() => { const obj = { n: 0 } // This will only work while I'm on the page for the first time // If I go to /about, or any other page, and go back, // code block below - will stop working and output the object to the console // Although if you look in _gsap the id of the animation is different from the previous one // Also, not only to but also from, timeline and other things stop working // with which you can smoothly change values gsap.to(obj, { n: 1000, duration: 1, onUpdate() { console.log(obj.n) // 0 - 1000 } }) }, []) return <></> }

There are two components: The first component uses pin, where the pin-spacing height equals the height of this element +=200%. The second component uses start for its trigger and gsap.from animation. When initializing the pin from the first component, it is given a new height, but the start/end positions of the second component are unaware of this, causing them to execute earlier. This is the main issue, and I couldn't find the correct solution to fix it. I created a minimal example, but for some reason, it doesn't work there ?

So I have created a component transition animation which works perfectly fine on local machine but when i deploy the website on vercel, the animation is very slow. Is there some way to optimize the animation? import React,{useEffect}from 'react' import { useNavigate } from 'react-router-dom'; import { locationBg } from '../../assets' import useLocationContext from '../../hooks/useLocationContext'; import { gsap } from 'gsap'; import MobileFrame from './MobileFrame'; const Location = () => { const navigate = useNavigate(); // Destructing variables from the Location Context const { data,setData, setHasSearched, setInputValue, setSelectedCountry } = useLocationContext(); useEffect(() => { const tl = gsap.timeline(); // Animate the Location component tl.fromTo('.LocationAnimationClass', { opacity: 50, y: 1200 }, // From { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } // To ); // Animate the MobileFrame component tl.fromTo('.MobileFrameClass', { x: '-600%', opacity: 20 }, { x: '0%', opacity: 1, duration: 1.8, ease: 'bounce.out' }, '+=0.2' ); tl.fromTo('.ButtonAnimationClass', { y: '400%', opacity: 0 }, { y: '0%', opacity: 1, duration: 1, ease: 'bounce.out' }, '+=0.2' ); }, []); // This useEffect is used for handling error on the location page useEffect(() => { if (!data) { navigate('/'); } return () => { setHasSearched(false); }; }, [data, navigate, setHasSearched]); // This function is handling the reset Button const handleReset = () => { setData(null) setSelectedCountry(null) setInputValue(null); navigate('/'); } return ( <> <div className='LocationAnimationClass overflow-hidden relative h-screen flex flex-col gap-[30px] md:gap-[40px] xl:gap-[20px] 2xl:gap-[90px] justify-center items-center bg-cover bg-center' style={{backgroundImage: `url(${locationBg})`}}> <div className='bg-black w-full h-full bg-opacity-30 absolute top-0 left-0'></div> <div className='MobileFrameClass'> <MobileFrame/> </div> <button className="ButtonAnimationClass bg-[#33c2cc] px-10 py-3 rounded-full font-noto-sans font-semibold text-3xl z-10 text-white" onClick={handleReset} > Reset </button> </div> </> ) } export default Location

I've created a custom cursor whose X and Y gets updated on change of mouse. Using React and GSAP. The cursor also changes in size when it is hovered on a specific text. However, the hover state is not consistent and glitches at the time of using it. I'm sharing the codesandbox link where the same problem is replicated. Any and every help is appreciated, thank you. Codesandbox Link: Link