How to properly use the newest version of gsap with ScrollMagic

[Tee 3 Likes (Newbie)]

I'm trying to use gsap in combination with ScrollMagic. To do so I created a timeline, but this returns an error for setTween(tween):

Quote

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

 

Anyways, after importing: import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I get the following error:

Quote

Can't resolve 'TimelineMax' in ...

 

import {gsap} from "gsap";
import ScrollMagic from "scrollmagic";

export const initPhoneScroll = () => {

    const tween = gsap.timeline()
        .to(".phone-left", 1, {
            x: -350
        })
        .to(".phone-right", 1, {
            x: 350
        });

    const controller = new ScrollMagic.Controller();

    const scene = new ScrollMagic.Scene({
        triggerElement: ".phone-image__wrapper",
        duration: "100%"
    })
        .setTween(tween)
        .addTo(controller);
};

 

How do I use gsap in combination with ScrollMagic correctly, since TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated? 

[Tee 3 Likes (Newbie)]

Ok I figured this was rather an issue with react than with gsap/scrollmagic.

 

Using scrollmagic-plugin-gsap instead solved the issue.