Jump to content
Search Community

ScrollTrigger missing plugin on Nux generate static site

initium test
Moderator Tag

Recommended Posts

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

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

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

  • 4 weeks later...

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

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

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

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

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

  • 4 months later...

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...

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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...