Jump to content
Search Community

avizmarques

Members

  • Posts

    11

  • Joined

  • Last visited

 Content Type 

Posts posted by avizmarques

    ScrollSmoother not found in nextjs

    in GSAP

    Posted

    I am trying to use ScrollSmoother in my nextjs project, however I am being unable to import the module. I get the error "module not found".

    I am using the dist folder for the import, and v 3.11.1

     

    import { ScrollSmoother } from 'gsap/dist/ScrollSmoother';

    The counter number does not work with the new version (3.11.1)

    in GSAP

    Posted

    On 9/17/2022 at 8:21 PM, GreenSock said:

    Sorry about the confusion there. It was indeed a regression related to the new revert() functionality (which empowers matchMedia() and context()) that affects when you from() tween non-CSS properties of DOM elements but it should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

     

    Better? 

     

    Hi, I am trying to install the beta due to this same problem, but I can't find the package in yarn. How can I use it?

     

    Thank you in advance

    GSAP + NEXTJS (REACT): scrolltrigger dissappears / stops working

    in GSAP

    Posted

    On 9/23/2022 at 6:16 PM, Rodrigo said:

    Hi,

     

    Can you provide a minimal demo so we can take a look at it? The only advice I can give you, based on what you have posted is to register ScrollTrigger in the _app.js file and not in every component, but beyond that I can't think of anything without looking at a live sample that we can tinker with.

     

    Everything seems to be working as expected here:

    https://stackblitz.com/edit/nextjs-reqcqo?file=pages%2F_app.js,pages%2Findex.js,pages%2Fabout.js

     

    Happy Tweening!!!


    Hi Rodrigo, thank you for your reply.

     

    In the example you sent me, ScrollTrigger is not really being used as a plugin, is it? Or is this how it should be used?

    When you try to use a gsap.to or a gsap.from it does not work anymore.

    For example: 

    gsap.from(numbers, {
    textContent: 0,
    duration: 2,
    snap: { textContent: 1 },
    scrollTrigger: { trigger: section, start: 'top bottom' },
    });

    animating textContent no longer works in gsap 3.11

    in GSAP

    Posted

    I've been animating a counter in this way, but it no longer works after upgrading to gsap 3.11. I don't see anything in the release notes that could cause it, so not sure if it's a bug?

    What happens now is that the text is simply replaced by a 0, but it does not increment as before. I tried removing the scrolltrigger, but that does not seem to be the issue - it does not animate regardless.

     

    const numbers = document.querySelectorAll('#number-counter');
     
    gsap.from(numbers, {
    textContent: 0,
    duration: 2,
    snap: { textContent: 1 },
    scrollTrigger: { trigger: section, start: 'top bottom', markers: true },
    });

    GSAP + NEXTJS (REACT): scrolltrigger dissappears / stops working

    in GSAP

    Posted

    thanks for your reply, these links are useful. However, I don't seem to be able to use gsap.context. I get an error:

    Property 'context' does not exist on type 'typeof gsap'.ts(2339)

    forcing the type does not work, it says gsap.context() is not a function.

     

    (edit: my bad I was using 3.10, upgrade fixed this ^ )


    The problem I am getting is that somehow it looks like ScrollTrigger is missing when I navigate from another page that has a ScrollTrigger with react next.  It tells me it's missing the plugin, even though I register it in the component.

×
×
  • Create New...