Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tee

How to properly use the newest version of gsap with ScrollMagic

Recommended Posts

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? 

Link to comment
Share on other sites

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

 

Using scrollmagic-plugin-gsap instead solved the issue.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×