GSAP ScrollToPlugin Issue in Nuxt.js project

[huangxiaoxuan0621]

I am making the scroll effect with GSAP and vue-scrollmagic in my Nuxt.js project. The code is the following as:

import {gsap, TweenMax} from 'gsap' import ScrollToPlugin from "gsap/ScrollToPlugin"; const plugins = [ScrollToPlugin];

export default { name: 'Test', mounted() { this.startAnimations(this.$refs) }, methods: { startAnimations: function(refs) { var tween = TweenMax.to(refs.slide1, 0.5, {scrollTo:{y: 500}}) const scene = this.$scrollmagic.scene({ triggerElement: refs.slide1, triggerHook: 0, duration: "100%" }) .setPin(refs.slide1) .setTween(tween) this.$scrollmagic.addScene(scene) } }, }

In this case, I have got the error as the following:

gsap-core.js?a5cf:3362 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.

How can I solve this issue?

[ZachSaucier]

Hey huangxiaoxuan0621. A couple of notes:

• We recommend GSAP 3 and using the GSAP 3 syntax. You won't need to import TweenMax or anything like that. See the GSAP 3 Migration Guide for more info.
• We do not recommend ScrollMagic. We highly recommend using the official GSAP scroll plugin, ScrollTrigger instead. It's better in every way!

As for your error, please create a minimal demo of the issue using something like CodePen or CodeSandbox. You can learn more about how to do so in this thread.

[huangxiaoxuan0621]

Thanks for your quick response. How can I install GSAP3 using the NPM command on my Nuxt.js project?

[ZachSaucier]

See the GSAP Installation page for details regarding installation 🙂

[huangxiaoxuan0621]

Already installed the package using npm install gsap, It's v3.4.2 But it's still error. gsap-core.js?a5cf:3362 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.

[ZachSaucier]

As stated, please create a minimal demo because it's really hard for us to help blindly 🙂

[jackdoyle]

My best guess is that you forgot to register the ScrollToPlugin.

gsap.registerPlugin(ScrollToPlugin);

[huangxiaoxuan0621]

Thank, Mr. Jack import { TweenMax, ScrollToPlugin, ScrollTrigger, gsap } from "gsap/all";

export default { name: 'Test', mounted() { gsap.registerPlugin(ScrollToPlugin) gsap.registerPlugin(ScrollTrigger) this.startAnimations(this.$refs) }, methods: { startAnimations: function(refs) { //gsap.to(refs.slide1, 0.5, {scrollTrigger: refs.slide1, x:500}) var tween = TweenMax.to(refs.slide1, 0.5, {scrollTo: {y:500}}) const scene = this.$scrollmagic.scene({ triggerElement: refs.slide1, triggerHook: 0, duration: "100%" }) .setPin(refs.slide1) .setTween(tween) this.$scrollmagic.addScene(scene) In this case, I have got the following as: ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

[jackdoyle]

ScrollMagic is NOT a GreenSock product and we cannot support it. I strongly recommend switching to ScrollTrigger which can do everything ScrollMagic does plus a LOT more, and is fully integrated with GSAP 3. The error you're getting is from ScrollMagic. You're welcome to try to contact ScrollMagic's author for help, but last I checked there were almost 500 open issues in that Github repo, and it hasn't been updated in a very long time.

If you still need help with anything GSAP-specific, please provide a minimal demo in CodePen or something. See https://greensock.com/demo

Also it doesn't make much sense that you seem to be importing/registering ScrollTrigger, but your code is actually using ScrollMagic. See https://greensock.com/scrolltrigger for details about ScrollTrigger.

[huangxiaoxuan0621]

Thanks, Mr.Jack I have just tried with scrollTrigger.

    gsap.registerPlugin(ScrollToPlugin)
    gsap.registerPlugin(ScrollTrigger);
    gsap.utils.toArray(".slide").forEach((panel, i) => {
        console.log($(panel).height() * (i+1))
        var tl = TweenLite.to(panel, .5, {scrollTo:{y:$(panel).height() * (i+1), autoKill:false},ease: Linear.easeNone})
        ScrollTrigger.create({
            animation: tl,
            trigger: panel,
            start: "top top",
            pin: true,
            pinSpacing: false
        });
    });

But the scrollTo is still not working.

[ZachSaucier]

Please make a complete minimal demo as we've told you to. Without one, we cannot help you.

[huangxiaoxuan0621]

https://codepen.io/andystent/pen/GRgjBdJ I want to make my page as the above

[ZachSaucier]

I want to make my page as the above

That does not help us. We need to see your code that recreates the issue.

[huangxiaoxuan0621]

Honestly, my project is based on Nuxt.js I don't know how to make a minimal demo with Nuxt.js

[ZachSaucier]

Start with this demo. Make it recreate the issue that you're facing while stripping out all of the unnecessary parts.

[huangxiaoxuan0621]

https://codesandbox.io/s/dreamy-fog-tqehl This is a minimal demo

[ZachSaucier]

That demo doesn't recreate the issue (it just has many errors). But alas.

It looks like you're trying to do something like this thread. The main issue is that you're importing things incorrectly. In Nuxt you should load the UMD version, as covered in the installation docs:

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

Then you can use the approach in the thread I link to above: https://codesandbox.io/s/goofy-kilby-0389x?file=/pages/index.vue

[huangxiaoxuan0621]

Thank you so much It works perfectly.

[huangxiaoxuan0621]

Scroll up not working. Now it only works with scroll down Could you please let me know it?

[ZachSaucier]

gsap.utils.toArray(".slide").forEach((panel, i) => {
    ScrollTrigger.create({
      trigger: panel,
      end: "bottom bottom",
      onEnter: () => goToSection(panel),
      onEnterBack: () => goToSection(panel),
    });
});

[huangxiaoxuan0621]

Wonderful!!!

[jormaturkenburg]

If there was an Oscar for best and friendliest support of a software library. Greensock would win it every single year. You guys are something else <3

[OSUblake]

In Nuxt you should load the UMD version, as covered in the installation docs:

You don't have import the UMD files if you add this to the build part of the nuxt.config.js file.

build: {
    transpile: ["gsap"], // no need to import UMD
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }

[jackdoyle]

@jormaturkenburg your comment made my day! Thanks for noticing the effort we put in. Means a lot.