Search the Community

hello guys, a quick question, I'm using Next.js 13, I'm using the native layout.js in which I've just added a Header and Footer component, so far nothing exceptional, I have my Header component in which I have a simple animation made with Gsap (useEffect). Everything seems to be working well, but the animation only works when the page is reloaded, not when I go from page to page (although that's not what I want) but, for example, after my preloader is played, no animation. If I take my Header component out of Layout.js and put it on my home page, the animation works normally. An idea of what I could do, the solution resists me. Thanks in advance

On clicking the link scrollTrigger in the below error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works. Here's a link to the same error that I replicated. https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js P.S I am a gsap noob and im still learning

This is my code https://github.com/akrdesign/gsap-pin-problem.git . I'm using Next.js and TypeScript. I have made three sections, one at the top, one in the center, and one at the bottom. I am trying to pin the center section and it's pinning too. You will see some navigation in the header, as soon as I switch from the home page to the About page, I get to see an error which is [NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.]. When I remove the pin from the scrollTrigger timeline then it runs perfectly. The section in which the problem is occurring will be found in the code on the home page inside the templates folder. I was trying to show the example on codesandbox but it could not be setup. That's why I have given the link of GitHub. Forgive me for this.🙏Also i provide code file gsap-pin-problem.zip

Hey everyone, I'm trying to migrate my React project (made with CRA) to a Next.js environment. I wonder if someone already has a similar error when importing GSAP modules (Flip, DrawSVGPlugin…). When I try to animate DOM elements in my hooks, I have this error : ReferenceError : document is not defined(cf. screenshot) That's frustrating because I have no issue with React (CRA), but only with Next.js. I read the Next.js documentation and searched questions about it before writing this topic, and saw nothing about this issue. Thank you!

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!

I am trying to use GSAP with a NextJS project, everything looks fine but for some reasons I am not able to scroll up or down whenever the mouse cursor is on top of the pinned element but it works when I move the mouse away from the pinned element and scroll again, any help is appreciated. I am attaching the code below. Component code import React, { useEffect, useRef } from "react"; import styles from "./Landing.module.sass"; // GSAP import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; export default function Hero() { const scoutHeroTrigger = useRef(); const scoutHeroMobile = useRef(); const scoutHeroWrapper = useRef() useEffect(() => { gsap.registerPlugin(ScrollTrigger); let timeline = gsap.timeline({ scrollTrigger: { trigger: scoutHeroMobile.current, pin: true, markers: true, start: "center center", end: "+=100 +=200", anticipatePin: true, pinReparent: true }, }); timeline.from(scoutHeroMobile.current, { right: -100, opacity: 1 }); }, []); return ( <div ref={scoutHeroTrigger}> <div ref={scoutHeroWrapper} className={styles.scoutHeroWrapper}> <div className={styles.scountIndexSVGContainer}> <svg viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon points="0,100 100,0 100,100" /> </svg>{" "} <img className={styles.scoutIndexLeftBlue} src="/assets/images/blue-tape-left.svg" /> <img className={styles.scoutIndexLeftGrey} src="/assets/images/grey-tape-left.svg" /> <img className={styles.scoutIndexRightGrey} src="/assets/images/grey-tape-right.svg" /> <img className={styles.scoutIndexRightBlue} src="/assets/images/blue-tape-right.svg" /> <img className={styles.scoutIndexRightWhite} src="/assets/images/white-tape-right.svg" /> </div> <div className={styles.scoutHeroContainer}> <div className={["scout-row scout-h-100", styles.scoutHeroRow].join(" ")}> <div className={[ "scout-col-8 scout-col-lg-12", styles.scoutHeroLeftCol, ].join(" ")} > <h1> Property details — <br /> in your hand. </h1> <button>Learn More</button> </div> <div className={[ "scout-col-4 scout-no-gutter scout-col-lg-12", styles.scoutHeroRightCol, ].join(" ")} > <img ref={scoutHeroMobile} style={{ zIndex: 99, right: 0 }} src="/assets/images/hero-phone.png" /> </div> </div> </div> </div> </div> ); } Sass File .scoutLandingNav height: 72px width: 100% background: #111 position: fixed left: 0 top: 0 z-index: 100 .scoutLandingNavContainer max-width: 1200px padding: 0 16px margin: 0 auto height: 100% div .scoutLandingNavLeftCol display: flex align-items: center ul margin-left: 32px list-style-type: none li margin-left: 40px float: left a font-weight: 500 font-size: 14px line-height: 20px display: block .scoutLandingNavRightCol display: flex justify-content: flex-end align-items: center button border: none width: 85px height: 40px outline: none background: #FFFFFF border-radius: 8px font-weight: 500 font-size: 14px line-height: 20px color: #111111 cursor: pointer .scoutHeroWrapper position: relative background: #111111 margin-top: 72px height: 780px .scountIndexSVGContainer position: absolute bottom: 0 width: 100% height: 10vw svg position: absolute bottom: 0 width: 100% height: 10vw fill: #fff .scoutIndexLeftBlue position: absolute bottom: -6.8px z-index: 1 transform: rotate(1.5deg) !important .scoutIndexLeftGrey position: absolute bottom: -87.1px z-index: 1 left: -5px transform: rotate(1.5deg) !important .scoutIndexRightGrey position: absolute top: -71.1px z-index: 1 right: 0 transform: rotate(1.45deg) !important .scoutIndexRightBlue position: absolute top: -33.6px z-index: 1 right: -5px transform: rotate(1.5deg) !important .scoutIndexRightWhite position: absolute top: -128.6px z-index: 1 right: 30px transform: rotate(1.5deg) !important .scoutHeroContainer max-width: 1200px margin: 0 auto height: 100% padding: 16px .scoutHeroRow align-items: flex-start !important .scoutHeroLeftCol h1 font-size: 72px line-height: 98px color: #FFFFFF margin-top: 168px font-family: "Space Grotesk" font-weight: 700 button background: #FFFFFF border-radius: 8px width: 196px height: 62px margin-top: 32px font-size: 20px line-height: 30px cursor: pointer border: none transition: .1s button:hover transform: scale(1.05) .scoutHeroRightCol position: relative img position: relative top: 72px

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?

Good Day All! I am writing because I have recently ran into a problem with the Club Greensock plugins in a project. Basically the story is as follows: I have a React project that is running on Next.js and is deployed on Vercel. Their pipeline is integrated to GitHub and all you have to do is push changes to your remote repo and it is built and deployed automatically by Vercel. As a side note, the flow is quite amazing and it is worth checking out... So I have recently added the Club Greensock plugins to the project and they are working like magic on the local server, the plugins really are amazing! However, whenever I deploy I am getting the following error since I am git-ignoring the tarball as I have read a couple of comments by the GSAP team asking not to upload the files to GitHub: error "./gsap-bonus.tgz": Tarball is not in network and can not be located in cache (["/vercel/3c5442f4/gsap-bonus.tgz","/vercel/.cache/yarn/v6/npm-gsap-3.4.1-b86fc24265bbb3738ad1efb8f7bd4b2aa4a38a20/node_modules/gsap/.yarn-tarball.tgz"]) I have read some posts in the forums but the suggestions and fixes don't seem to apply to this particular case. I am thinking that a quick fix could be if by any chance the plugins are deployed as a private NPM package. I really don't have any other ideas at the moment... Please, please, please let me know if anyone else has run into a similar issue and what solutions have you devised/come across!

Hi all, I did some animations with gsap and scrollscene and it working fine when I run the development environment but when I build the project and visit the page I get errors in the console. Uncaught TypeError: Cannot assign to read only property 'x' of object '#<HTMLImageElement>' I tried to add a polyfill like the scollscene docs say and I used next-transpile-modules and transpiled gsap like this but it didn't work. const withTM = require('next-transpile-modules')(['gsap']); Any suggestions?