Using Gsap and Scrollmagic in Vue Cli Component

[Nima_general]

Hi there, 

 

I want to use Gsap and Scrollmagic in Vue Cli Component. I installed both with npm in Vue and I imported them as follows:

 

import ScrollMagic from 'scrollmagic';
import { gsap , ScrollTrigger , Draggable , MotionPathPlugin } from 'gsap/all';
gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin );

In the next step I wrote my code in the mounted section:

 

mounted () {

        var controller = new ScrollMagic.Controller();
        var tl = new TimelineMax();
        tl.staggerFrom(".box", 1.25, {
            scale: 0,
            cycle: {
                y: [-50, 50]
            },
            stagger: {
                from: "center",
                amount: 0.25
            }
        });

        new ScrollMagic.Scene({
            triggerElement: "#stage",
            triggerHook: 0
        })
            .addIndicators({
                colorTrigger: "white",
                colorStart: "white",
                colorEnd: "white",
                indent: 5
            })
            .setTween(tl)
            .addTo(controller);

 

But when I try to execute my code, I get the following error and it does not work 

 

(ScrollMagic.Scene) -> ERROR calling addIndicators() due to missing Plugin 'debug.addIndicators'. Please make sure to include plugins/debug.addIndicators.js

ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

* I must also say that I do not use the webpack in my project. I tried to import direct the file form node-modules, but it didnt work!

 

Can someone help me to solve it!
Best regards

[Cassie]

Hi there pal! 

Looks like you're trying to install ScrollTrigger - which is our scroll plugin - https://greensock.com/docs/v3/Plugins/ScrollTrigger.
But then using scrollMagic? We highly recommend just using ScrollTrigger instead - no need to use both.

You're also using tweenMax syntax - this is from an older version of GSAP.

We definitely recommend that you learn and use GSAP 3 - It has a smaller file size, a sleeker API, and a bunch of new features.

If you have any issues getting this setup please shout.

[Nima_general]

Hi Cassie,

 

Does it mean that we don't need to use ScrollMagic? 

[Cassie]

Yep - ScrollMagic isn't a GSAP product. ScrollTrigger is.

[Nima_general]

@Cassie

 

Thank you