Search the Community

Hello, I am using GSAP and next to build my Portfolio website. I have previously worked with same setup and every thing was working. However, now in my project when I tried to use gsap.from method to fade in reveal headings from below, it is not working. Heres the code snippet import React, { useLayoutEffect, useRef } from 'react' import Style from '@/styles/moudle/hero.module.scss' import { gsap } from 'gsap' const Hero = () => { let line = useRef(null) useLayoutEffect(() => { const tl = gsap.timeline() const ctx = gsap.context(() => { // tl.from(line, { // duration: 0.7, // skewY: 4, // y: 69, // autoAlpha: 0, // }).from('p', { // y: 50, // duration: 0.5, // autoAlpha: 0, // skewY: 4, // }) gsap.fromTo(line, { y: 50, autoAlpha: 0, }, { y: 0, autoAlpha: 1, }) }) return () => ctx.revert() }, []) return ( <> <section className={`${Style.wrapper}`}> <div className='container'> <div className={Style.hero_text}> <h1> <span ref={(el: any) => (line = el)}>I make cool frontend</span> </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic provident reiciendis voluptatem eius eveniet itaque?</p> </div> </div> </section> </> ) } export default Hero Here, I am using typescript. I read a post in this community to use useLayoutEffect instead of useEffect so, I am using useLayoutEffect. I tried to use .from and .fromTo for the animation but both doesn't worked. Opacity and autoAlpha is working but not x and y value. Other dependency that I am using is Lenis for smooth scroll. I thought this might be the cause and tried in code sandbox with same setup but here it is working properly. https://codesandbox.io/embed/peaceful-ritchie-xtkrl4?fontsize=14&hidenavigation=1&theme=dark

Sorry for my bad english. i make an animation with ScrollTrigger, when the images become more and more bigger, the images will flash. full screen to see this example, you will find this problem. https://codesandbox.io/p/sandbox/blissful-bhabha-rz7wlb?file=%2Fpages%2Findex.tsx&selection=[{"endColumn"%3A40%2C"endLineNumber"%3A80%2C"startColumn"%3A40%2C"startLineNumber"%3A80}]

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!

hi, I have a big problem after updating the gsap library from 3.6.1 to current version. In the first case (version 3.6.1) everything work fine, but in the current version is a problem with scroll after firing animation, only the first animation works correctly but the next animations after firing it moves scroll to top (it is big jump ~100vh). On iOS mobile devices, the first and second solution working well and this problem not happend. I prepared two codesandbox, the first is with version 3.6.1 (next 11) and the second with the current version (gsap: 3.11.4, next: 13). I tried update next in my project but problem is the same and next version is not important in this case. If someone want to test it please test on mobile, because in devtools everything is ok. Codesandbox gsap 3.6.1: https://codesandbox.io/s/gsap-3-6-1-47r3qv Live: https://47r3qv.sse.codesandbox.io/ Codesandbox gsap 3.11.4: https://codesandbox.io/s/gsap-3-11-4-6fn5m0 Live: https://6fn5m0.sse.codesandbox.io/

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

Hello, I came across a website from the Showcase on GSAP, and I really liked the animation they'd done when switching/changing between the pages, and below is the website for the reference. https://andersonsupply.com/ I tried to checkout the GSAP Products but unable to find what kind of Page Transition they'd used using GSAP, can anyone help me with that how I can add the similar Page Transition in Nextjs using GSAP? waiting for your valuable reply, Regards, Dhaval

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

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

This is my first using GSAP, and I'm stuck in errors. I tried to import `MorphSVGPlugin` in `Next.js` app and `React.js` app and it is not importing it. I am writing the exact code given in GreenSock | Docs | Installation, but it is giving Could not find module in path: `'gsap/MorphSVGPlugin' relative to '/src/App.js'` error in `React.js`, and `Module not found: Can't resolve 'gsap/dist/MorphSVGPlugin'` error in `Next.js` CodeSandbox URL: xenodochial-haze-nxelbo - CodeSandbox

Hi just joined to club GreenSock and I'm trying to make animation with DrawSVGPlugin ,following steps of codepen example, and Nextjs. The SVG renders for 1 second then it disappears. I attach a image with the code I have

Hey guys, I met GSAP today and I was impressed with the quality of animations that it is possible to do, I found an example of how to make the horizontal scroll using vanilla js, someone who has already done it using react can give me an example of how to make this type of animation. Thank you very much :D

// 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?

So I have the home page set up with a fixed position navbar at the top. You land on the site and an intro animation occurs just fine. You scroll down and the animations occur just fine. But once you're at the bottom of the home page and decide to navigate to another page via the navbar links from the fixed navbar, (I'm using the Nextjs <Link> component here), it switches to the new page but starts at the BOTTOM of the new page then SCROLLS up to the top of the new page, triggering all of the animations for the new page. It's as if switching pages brings you to the same y-position as the previous page, but then it autoscrolls really quickly to the top as if it's an anchor tag with an #id being clicked. Is this a Nextjs issue? Or a GSAP issue?

I want to reuse an hamburger menu I had from a previous react app in my new Nextjs app. There is a siple animation on a list of links. On the previous app, the link where with React-router-dom and it was ok. Since I now use next/link, it doesn't work anymore. Any reason for that? const handleHover = (e) => { gsap.to(e.target, { duration: 0.3, y: 3, skewX: 4, ease: 'power3.inOut' }); }; const handleHoverExit = (e) => { gsap.to(e.target, { duration: 0.3, y: -3, skewX: 0, ease: 'power3.inOut' }); } <nav> <ul> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="/nouveautes">Nouveautés</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="/catalogue"> Catalogue</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="https://shop.paradisepapers.fr/"> Diffusion</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="/contacts"> Contacts</Link></li> <li><Link onMouseEnter={handleHover} onMouseOut={handleHoverExit} ref={el => (boxRefs.current = el)} href="https://cmeditions.us17.list-manage.com/subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&amp;id=fa0ff0c34e"> Newsletter</Link></li> </ul> </nav>

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

I am having a very weird issue with scrolltrigger. I am shifting the navbar logo using scrollTrigger. Initially it start from top where the navbar is but as i scroll through the page the trigger start position shift mid way to the page and the animation starts again which was only supposed to happen when i have scrolled towards the navbar position. This is the effect i am using. Is there any issue with this code? Let me know if there is any issue with this code and if necessary i'll also try to recreate the issue on codesandbox but i am not sure if i'll be able to recreate it. I know this is very vague question, let me know if i need to explain more. It happens especially on iPad, less frequent on desktop(chrome). useEffect(() => { ScrollTrigger.saveStyles(refMenu.current) ScrollTrigger.matchMedia({ '(min-width: 768px)': function () { gsap.fromTo( refMenu.current, { y: '120px' }, { y: '0', scrollTrigger: { trigger: refMenu.current, start: 'top top+=126px', end: 'bottom ', scrub: true, markers: true, id: 'nav-scroll', }, } ) }, }) }, []) Thanks.

Olá pessoal, estou tentando entender o motivo pelo qual a minha animação fica com essas sombras/fantasmas. Seria algo errado no meu código? import { ReactNode, useLayoutEffect, useRef } from "react"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { Container, GroupCards, GroupCardsLeft, GroupCardsRight, Card, } from "./styles"; interface VendasProps { children?: ReactNode; } function Vendas({}: VendasProps) { gsap.registerPlugin(ScrollTrigger); // Cards let cardRef0 = useRef(); let cardRef1 = useRef(); let cardRef2 = useRef(); let cardRef3 = useRef(); let cardRef4 = useRef(); let cardRef5 = useRef(); let cardRef6 = useRef(); let cardRef7 = useRef(); let cardRef8 = useRef(); let cardRef9 = useRef(); let cardRef10 = useRef(); if (typeof window !== "undefined") { useLayoutEffect(() => { gsap.to(cardRef0?.current, { y: -830, scrollTrigger: { trigger: cardRef0?.current, scrub: 2, }, }); gsap.to(cardRef1?.current, { y: -1030, scrollTrigger: { trigger: cardRef1?.current, scrub: 2, }, }); gsap.to(cardRef2?.current, { y: -1390, scrollTrigger: { trigger: cardRef2?.current, scrub: 2, }, }); gsap.to(cardRef3?.current, { y: -1510, scrollTrigger: { trigger: cardRef3?.current, scrub: 2, }, }); gsap.to(cardRef4?.current, { y: -830, scrollTrigger: { trigger: cardRef4?.current, scrub: 2, }, }); gsap.to(cardRef5?.current, { y: -1430, scrollTrigger: { trigger: cardRef5?.current, scrub: 2, }, }); gsap.to(cardRef6?.current, { y: -1390, scrollTrigger: { trigger: cardRef6?.current, scrub: 2, }, }); gsap.to(cardRef7?.current, { y: -910, scrollTrigger: { trigger: cardRef7?.current, scrub: 2, }, }); gsap.to(cardRef8?.current, { y: -830, scrollTrigger: { trigger: cardRef8?.current, scrub: 2, }, }); gsap.to(cardRef9?.current, { y: -1430, scrollTrigger: { trigger: cardRef9?.current, scrub: 2, }, }); gsap.to(cardRef10?.current, { y: -1390, scrollTrigger: { trigger: cardRef10?.current, scrub: 2, }, }); return () => { gsap.killTweensOf(cardRef0); gsap.killTweensOf(cardRef1); gsap.killTweensOf(cardRef2); gsap.killTweensOf(cardRef3); gsap.killTweensOf(cardRef4); gsap.killTweensOf(cardRef5); gsap.killTweensOf(cardRef6); gsap.killTweensOf(cardRef7); gsap.killTweensOf(cardRef8); gsap.killTweensOf(cardRef9); gsap.killTweensOf(cardRef10); }; }, []); } return ( <Container> <GroupCards> <GroupCardsLeft> <Card ref={cardRef0} id="cardRef0"> <h4>Automatize suas vendas e escale mais</h4> <p> Envio automático de catálogos, ofertas e outras mensagens pelo WhatsApp. </p> <p> Bot disponível para responder dúvidas a qualquer momento, inclusive nos feriados e fins de semana. </p> <p> {" "} Automatize com chatbot e direcione o cliente ao chat humano quando necessário. </p> </Card> <Card ref={cardRef1} id="cardRef1"> <h4>Venda em qualquer canal e em tempo real.</h4> <p>Tenha controle multicanal de todas as suas interações</p> <p> {" "} Ofereça a possibilidade de o seu cliente comprar com você em qualquer canal, obtendo o direcionamento certo. </p> </Card> <Card ref={cardRef2} id="cardRef2"> <h4>1 número = vários profissionais no WhatsApp</h4> <p>Escale suas vendas mantendo apenas 1 número no WhatsApp.</p> <p> Uso de API oficial para mais segurança e estabilidade para o seu negócio não parar. </p> </Card> <Card ref={cardRef3} id="cardRef3"> <h4>Recuperação de carrinho abandonado</h4> <p> Pare de perder vendas por abandono de carrinho. Motive seu potencial cliente a retornar à compra, por meio de envio de mensagens via WhatsApp. Ofereça algo especial, como um cupom de desconto, para que ele possa retomar e concluir sua compra. </p> </Card> <Card ref={cardRef4} id="cardRef4"> <h4>Siga os passos e ações do seu cliente.</h4> <p>Veja quais foram os pontos de interação com a sua marca.</p> <p> Tenha uma visualização simplificada de todos os contatos do cliente em um único lugar. </p> </Card> </GroupCardsLeft> <GroupCardsRight> <Card ref={cardRef5} id="cardRef5"> <h4>Geolocalização para levar o cliente à loja física</h4> <p> Oriente de forma automatizada o seu novo cliente ou um cliente já conhecido a encontrar a loja mais próxima ao endereço dele. </p> </Card> <Card ref={cardRef6} id="cardRef6"> <h4>Comunique a disponibilidade dos seus produtos</h4> <p> Informe seu cliente avisos de reposição no estoque, novidades que chegaram no catálogo, dentre outras atualizações. </p> </Card> <Card ref={cardRef7} id="cardRef7"> <h4>Agilize respostas para dúvidas frequentes </h4> <p> Mantenha visível as dúvidas e respostas mais frequentes dos consumidores e acelere a tomada de decisão. </p> </Card> <Card ref={cardRef8} id="cardRef8"> <h4>Gerencie conversas entre vendedores e clientes</h4> <p> Direcione o cliente de forma automática para o departamento adequado e ofereça atendimento personalizado. </p> </Card> <Card ref={cardRef9} id="cardRef9"> <h4>Vitrine com avaliações sobre seus produtos</h4> <p> Disponibilize comentários e avaliações sobre experiências anteriores com seus produtos para ajudar ainda mais na conversão. </p> <p> Ofereça mais segurança para novos consumidores ao expor experiências anteriores dos seus atuais clientes. </p> </Card> <Card ref={cardRef10} id="cardRef10"> <h4>Indicação de produtos no momento certo</h4> <p> Sugira produtos complementares de forma automática, colaborando para mais compras e que se complementam. </p> <p> Entenda as preferências do seu consumidor e ofereça produtos de forma mais assertiva. </p> </Card> </GroupCardsRight> </GroupCards> </Container> ); } export default Vendas; Vale ressaltar que, estou chamando um componente dentro do outro:

Hi, I'm trying to implement a basic ScrollTrigger animation on Nextjs. It's basically changing sidebar background based on current position of scroll. You can check it's implementation here: Introduction - Budget Basics | Open Budgets India. Problem is initial load of page, which messes up the the start/end of scrolltrigger but resizing the browser fixes the position. I tried some solutions from this post: ScrollTrigger Unexpected Behavior with Smooth Scrollbar in React/NextJs - GSAP - GreenSock but they are not working in my case. All of the code is available here: budget-basic-next/[chapter].js at main · PixeledCode/budget-basic-next (github.com) but basically what I'm doing is useEffect(() => { gsap.registerPlugin(ScrollTrigger) setTimeout(handleSidebarAnimation, 100) return () => { ScrollTrigger.refresh() if (ScrollTrigger.getById('st-id')) { ScrollTrigger.getById('st-id').kill() } } }, []) and the function is function handleSidebarAnimation() { const articles = gsap.utils.toArray('article') articles.forEach((article) => { let sideLink = document.querySelector( `li[keyid=${article.getAttribute('id')}]` ) gsap.to(sideLink, { scrollTrigger: { markers: true, trigger: article, id: 'st-id', start: 'top 22%', end: 'bottom 18%', refreshPriority: 1, toggleActions: 'restart complete reverse reset', onEnter() { sideLink.classList.add('activeSidebar') }, onLeave() { sideLink.classList.remove('activeSidebar') }, onEnterBack() { sideLink.classList.add('activeSidebar') }, onLeaveBack() { sideLink.classList.remove('activeSidebar') }, }, }) }) } I know I'm probably doing something wrong and it's dom order which is creating issues on initial load (eg: coming from home page to the page with sidebar and animation.) but I am not able to find where. Any help is appreciated!

I am having an issue I have seen described in other contexts but haven't found a solution for. My project is using the Next.js framework for react, Smooth Scrollbar, and ScrollTrigger. I have a .to() with a scrollTrigger object inside that is in a <Navigation /> component. The text at the top of the page is just supposed to pin itself and scroll with the window, but it only works in some cases. I think I'm not fully understanding some lifecycle thing here. All these methods of reproducing my errors are also commented at the top of the index.js file in the sandbox With Smooth Scrollbar enabled, the scrollTrigger object stored in the <Navigation /> component, and the <Navigation /> component imported and nested in the main functional component, the effect does not work after refreshing the page. If you go into the scrollTrigger object in the <Navigation /> component and update one of the values (change the 'end' value to a different number) this will trigger a hot reload without refreshing the browser. If you scroll back to the top and scroll down, you will see the effect is now working. If you comment out the entire useEffect() hook in the main index.js component this will disable Smooth Scrollbar. If you save the file and refresh you will see the effect working as intended, without having to trigger a hot reload, but now there is no Smooth Scrollbar. If you reset the sandbox to the original state, uncomment the HTML in the main index.js components return, comment out the <Navigation /> component right above it, save and then refresh, you will see that the effect works on load, with Smooth Scrollbar, without having to trigger a hot reload, but now I've lost the ability to nest components. CodeSandbox link Direct link to results in browser (A little easier for refreshing) Any help would be greatly appreciated. I'm out of ideas at this point.

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

Hi there, I'm running into weirdness with scrollTrigger and marker positioning. I have a page with 2 components built in Next.js, one is using scrollTrigger to pin an element for a duration (AnimationScrollBlock), and another component fades in some images when the user scrolls to it (ImagesBlock). When I click between navigation pages and then back to the "Case" page, sometimes the markers seem to be in the correct position, sometimes they aren't. The same thing appears to happen when I do a hard refresh on the page. Sometimes they are correct, other times they aren't. When they aren't in the correct position the animation for the fading images has already completed before I actually get to that section of the screen. Here is a url to see the issue in action: https://3qfnr.sse.codesandbox.io/case Try doing a hard refresh on the page and see if the marker position for images-1 and images-2 move around. Click to another page and then back to see if the markers move. Screenshot below as well showing what I see when the position is calculated incorrectly and correctly. And here is the codesandbox link to see the code: https://codesandbox.io/s/eager-banach-3qfnr (click on the Case Study link in the nav) As a test, when I move the AnimationScrollBlock component to be underneath the ImagesBlock component, things work as expected. I'm sure it's something dumb but I'm stumped, would really appreciate any insight you might have! Thank you!

Hi there, I'm new to animating using Gsap and I'm planning to integrate it to Nextjs together with Scrollmagic, however, I'm unsure of how to do it. I keep getting error when trying to use tween staggerFrom property. It keeps saying it doesn't exist. If anyone have experience the same issue as me and manage to find a fix, do let me know in the comments. Thank you. Edit: I managed to figure out how to do it. Thank you all for your help

Hello, I am doing some animation on my nextjs application, using jquery. You have the code in codepen. The problem is that app is SPA (Single Page Application), and every time a move to a new route, the menu in the left shows great, but the text takes time to render. The first time app loads, it loads just like in codepen. Then when navigate to other page, i need to wait 1 second for text start animate. Then move to another page and it takes 2 seconds to start animating and showing text. While the background from the menu is showing great. The problem i guess is with that staggerTo method, since that is the one that does that.

Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?