Jump to content


How to properly use the newest version of gsap with ScrollMagic

Moderator Tag

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):


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:


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%"


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.