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