Jump to content
GreenSock

initium

ScrollTrigger missing plugin on Nux generate static site

By initium, in GSAP. Views: 880

Moderator Tag

Recommended Posts

Posted

Hello,

i am using Nuxt, gsap and ScrollTrigger for my website. In Development mode its everything fine but as soon as i generate the website to a static page, Scrolltrigger is not working anymore. The animations are executed as soon as the site gets loaded.

 

nuxt.config.js 

  build: {
    transpile: [
      "gsap"
    ]
  },

 

 

index.js 

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

  created() {
    gsap.registerPlugin(ScrollTrigger);
  },
 let t1 = gsap.timeline({
        scrollTrigger: {
          trigger: ".leistungen-wrapper",
          start: "top 95%",
        },
      });

 

Link to comment
Share on other sites
Posted

Hey there, 

 

I would suggest adding markers:true and checking to see if the markers are in the correct position.

If they're not in the correct position it's likely because the DOM wasn't settled when you created them - you can callscrollTrigger.refresh() when you're sure the whole DOM has loaded to rectify this.

 

If this doesn't work a minimal demo would be a huge help. 

Thanks!

Link to comment
Share on other sites
  • Author
Posted

markers doesnt appear on the live website but on dev mode. I also get a warning in the console:

Invalid property scrollTrigger set to {trigger: '.kunden-wrapper', start: 'top 80%', once: true} Missing plugin? gsap.registerPlugin()

Link to comment
Share on other sites
Posted

Sounds like you haven't registered ScrollTrigger. Are you trying to create the timeline before the 'created' function?

Hard to advise without seeing a demo - can you provide one for us?

Link to comment
Share on other sites
  • 4 weeks later...
  • Author
Posted

i dont know if a demo would help. Because on my local machine in my dev environment it works all fine. But when i bring it to live and generating the website with nuxt, it breaks.

 

The animation starts on pageload and not when it is in the viewport.

I can link my website if this can help.

https://neu.initiumit.de/

Link to comment
Share on other sites
  • Author
Posted

index.vue:

let t1 = gsap.timeline({
        scrollTrigger: {
          trigger: ".leistungen-wrapper",
          start: "top 95%",
          markers: true,
        },
      });
 
      t1.from(".leistungen-software-wrapper", {
        opacity: 0,
        x: -200,
        duration: 0.7,
        ease: "back.inOut",
      }).from(
        ".leistungen-website-wrapper",
        {
          opacity: 0,
          x: 200,
          duration: 0.7,
          ease: "back.inOut",
        },
        "-=.7"
      );

 

 

and im creating another timeline in different file which is used in index.vue:

 let t1 = gsap.timeline({
        scrollTrigger: {
          trigger: ".kunden-wrapper",
          start: "top 80%",
          once: true,
        },
      });
 
      t1.from(".kunden-h1", {
        y: 100,
        opacity: 0,
        duration: 0.3,
      })
        .from(".kunden-p", {
          y: 100,
          opacity: 0,
          duration: 0.3,
        })
        .from(".partner-image", {
          y: 100,
          opacity: 0,
          stagger: {
            each: 0.1,
            from: "center",
            ease: "ease-in-out",
          },
        });

 

 

importing like this:

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

 

 

 

 

 

 

 

 

 

 

Link to comment
Share on other sites
Posted

Sorry, but it's not feasible to troubleshoot a live site like that. If you'd like some help, please provide a minimal demo that recreates the issue, or you can contact us (or post in the Jobs & Freelance forum) for paid consulting services. 

 

The warning messages in the console definitely indicate that when you're creating [at least some of] your tweens, ScrollTrigger has NOT been registered. Maybe try adding a console.log(ScrollTrigger) right before any tweens that are triggering that message. Maybe it's an order of operation thing in your code where you thing some code is running after you registered ScrollTrigger, but it isn't true. 🤷‍♂️

 

Here are some starter CodeSandbox projects for React/Next/Nuxt/Gatsby. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites
Posted

One other idea: maybe your bundler doesn't recognize ES Modules, so try importing from the /dist/ directory instead: 

  

// old
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

// new
import gsap from "gsap/dist/gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

Totally guessing here. All your code is minified on the live site, so it's virtually impossible to troubleshoot. 

  • Like 1
Link to comment
Share on other sites
  • Author
Posted

https://codesandbox.io/s/optimistic-tess-9p5jzo

 

I am using multiple timelines in order to simulate multiple components.

I also did the console.log(ScrollTrigger) and it is not null. 

 

Console Logs:

1. 9fa9222.js:2 Invalid property scrollTrigger set to {trigger: '.kunden-wrapper', start: 'top 80%', once: true} Missing plugin? gsap.registerPlugin()

2.GSAP target  not found. https://greensock.com 

3. ƒ e(n,o){r||e.register(t)||console.warn("Please gsap.registerPlugin(ScrollTrigger)"),this.init(n,o)}

4. 9fa9222.js:2 Invalid property scrollTrigger set to {trigger: '.leistungen-wrapper', start: 'top 95%', markers: true} Missing plugin? gsap.registerPlugin()

Link to comment
Share on other sites
Posted

I don't see that error in your minimal demo at all. Please provide detailed instructions for recreating the problem so we can see it in the environment. 

Link to comment
Share on other sites
  • Author
Posted

this error comes with my live version. As i said it works in my dev environment and it also works in the sandbox. But it does not work when i generate the website to a static website with nuxt.

Link to comment
Share on other sites
Posted

Sorry, we can't troubleshoot issues like that for you. It's clearly not a GSAP-related issue. Maybe seek some help from the Nuxt community? GSAP works fine with any framework, so rest assured that you can use GSAP in Nuxt. It sounds like a problem with your build tools or deployment or something like that. I wish I had an answer for you but without a clear way to reproduce the issue on our end, it's impossible for us to offer any help. 

  • Like 1
Link to comment
Share on other sites
Posted

Did you try my suggestion of using the files in the /dist/ directory? Some build tools don't accommodate ES Modules, so I wonder if that's the problem. 

Link to comment
Share on other sites
  • 4 months later...
Posted

Hi initium,

I don't know if you're still struggling with this but i had a similar issue using Nuxt 3 and ScrollTrigger.

I solved by turning my mounted hook in an async function (i used mounted instead of created) and importing ScrollTrigger using:

const ScrollTrigger = await  import('gsap/ScrollTrigger ')

And the my animation worked il live mode generating a static site.

 

Hope this will help you

  • Like 1
  • Thanks 1
Link to comment
Share on other sites
  • 4 weeks later...
Posted

Hi everyone,

 

We just added this ScrollTrigger Starter template that uses Nuxt3 (3.0.0 stable release) and it's working great on development and when the site is generated as well:

 

https://stackblitz.com/edit/nuxt-starter-6nxgbu?file=nuxt.config.ts,app.vue

 

Let us know if you have any question, comment or issue regarding this.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account