[Using Gsap and Scrollmagic in Vue Cli Component]

@Cassie

 

Thank you 

[Using Gsap and Scrollmagic in Vue Cli Component]

Hi Cassie,

 

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

[Using Gsap and Scrollmagic in Vue Cli Component]

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

[scale not working correct in safari]

@OSUblake Thank you, it works now! 😍👍

[scale not working correct in safari]

Hi there,

 

I want to change scale of headline after scroll, in all browsers works correct except Safari and the quality of the headline tag decreases. ( The photo you see in the attachment).I have written my code as follows:

 

TweenMax.to(".textVideo h2", 300, { scale: 6})

 

When I change the CSS in inspect Element as follows;

 

-webkit-transform:scale(0.9, 0.9);

it works correct in safari (The second photo) , how can i solve this issue?

[Keep the element in the scene after the animation]

Hi there,

 

The element is displayed after scrolling and its style changes a bit. I want to keep the element after animation on scene, but when the animation is over and when scrolling, the element moves up and leaves the scene. how can i keep that more on scene? for example two seconds more?

 

[Change image source during scroll]

Hi there,

 

I want to change the image while scrolling, I have about 10 images that I want to display animated but while scrolling. Exactly the same as changing the image on the Apple Website (https://www.apple.com/iphone-11-pro/). how can i do that with GSAP?