Jump to content
Search Community

null

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by null

    ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page

    in GSAP

    Posted

    @OSUblake

     

    Thank you for your help.  With your guidance we FINALLY got it working!!! :)

     

    You were right, I needed to refresh the Scrolltrigger when the animation going into the next page is done - or at least refresh once the next page is visible.

     

    Here is the demo.

     

    The coolest part is that I now know how to use ScrollSmoother inside CodeSandbox!

     

    Thank you very very very much.

     

    • Like 3

    ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page

    in GSAP

    Posted

    Blake, your CodeSandbox starter is awesome and works fantastic.

     

    But I must be using CodeSandbox wrong because every time I add anything it breaks with an "Internal Server Error".

     

    It is not just when I add something to your CodeSandbox.  This error happens with every single CodeSandbox I try to use.

     

    I have tried dozens over the last several days and I always get this error.

     

    CodeSandbox is really neat and I really really want to be able to use it.

     

    Can you please watch this video I recorded that shows me running into the error and let me know what I am doing wrong?

     

    Thank you very much for the help.

    ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page

    in GSAP

    Posted

    Hi guys. 

     

    Here is a minimal demo.  Clone it or download the .zip and place the Club Greensock gsap-bonus.tgz at the root and do npm install(as described here).

     

    Then run npm run dev to run it.

     

    Scroll down and see how there is a Scrolltrigger animation on the navbar.

     

    Then, navigate to the page titled "parallax".  This page has ScrollSmoother on it.  The navbar ScrollTrigger animation does still work on this page.

     

    Now, navigate to another page.  The ScrollScrolltrigger navbar animation is broken.

     

    Then navigate to another page and it works again!

     

    I have been troubleshooting this for a whole day and I cannot figure it out.

     

    Can anyone help me?

     

    If anyone knows how I can use ScrollSmoother plugin in a Codesandbox without exposing my Club Greensock .zip then I can create a Codesandbox demo so you don't have to install the npm packages locally.

     

    Thank you in advance.

     

    P.S. Scrollsmoother (and ScrollTrigger and all of GSAP) is AWESOME!

    FLIP in Next.js does not work (GSAP works fine in Next.js)

    in GSAP

    Posted

    I am a club GreenSock member and have been using GSAP inside Next.js with great results.

     

    However, when I try to use the Flip plug  I get the following error:

     

    C:\dev\web-app-frontend\node_modules\gsap\Flip.js:12
    import { getGlobalMatrix, _getDocScrollTop, _getDocScrollLeft, Matrix2D, _setDoc, _isFixed, _getCTM } from "./utils/matrix.js";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
        at wrapSafe (internal/modules/cjs/loader.js:992:16)
        at Module._compile (internal/modules/cjs/loader.js:1040:27)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
        at Module.load (internal/modules/cjs/loader.js:941:32)
        at Function.Module._load (internal/modules/cjs/loader.js:782:14)
        at Module.require (internal/modules/cjs/loader.js:965:19)
        at require (internal/modules/cjs/helpers.js:88:18)
        at Object.gsap/Flip (C:\dev\web-app-frontend\.next\server\pages\_app.js:1183:18)
        at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
        at Module../src/components/sidedrawer/sidedrawer.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:912:67)
        at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
        at Module../src/components/layout/layout.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:433:95)
        at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
        at Module../src/pages/_app.tsx (C:\dev\web-app-frontend\.next\server\pages\_app.js:1058:87)
        at __webpack_require__ (C:\dev\web-app-frontend\.next\server\pages\_app.js:23:31)
        at Object.0 (C:\dev\web-app-frontend\.next\server\pages\_app.js:1160:18)
     

    I am importing Flip as follows:

     

    import { gsap } from 'gsap';
    import { Flip } from 'gsap/Flip';
    gsap.registerPlugin(Flip);

     

    What am I doing wrong?

×
×
  • Create New...