Search code examples
javascriptreactjsfrontendgsap

React - GSAP w/ ScrollMagic - Cannot add Scene option 'tweenChanges', because it already exists

The goals of this Codepen (Go to the scrollExample folder whitch is responsible for the /scroll route) is to trigger the image reveal effect on the section scroll.

How i'm doing the animation:

First i'm using the CSSRulePlugin of GSAP to get the pseudo element that i want to animate. After that, i created a timeline to put the tween and write the animation properties.

Now talking about ScrollMagic, first i created a Controller and then a Scene. With the scene, i'm passing the element selector that i want to trigger the animation and also the duration (amount of pixels). And the most important part is to set the tween that will get triggered on the section scroll.

 componentDidMount() {
        const imageReveal = CSSRulePlugin.getRule(".image-container:after");
        const timeline = new TimelineLite();
        timeline.from(imageReveal, {
          duration: 0.4,
          cssRule: { scale: 1.2 }
        });

        new ScrollMagic.Scene({
          triggerElement: "#scrollStarts",
          duration: 100
        })
          .setTween(timeline)
          .addTo(this.controller); // assign the scene to the controller
      }

The problem: The scroll animation is not working and i'm getting the following errors:

[static] ScrollMagic.Scene -> Cannot add Scene option 'tweenChanges', because it already exists.
(animation.gsap) -> ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

I don't why my tween is invalid and why the tweenChanges already exists since i didn't see anything happening on the scroll.

Solution

  • Two libraries are being used in the project — scrollmagic-plugin-gsap and the default one in scrollmagic.

    scrollmagic-plugin-gsap is meant to be configured with ScrollMagic, TweenMax, TimelineMax, not ScrollMagic and gsap. Refer to usage docs

    Looking closely, scrollmagic-plugin-gsap isn't required in your project as you can roll with the plugin provided in scrollmagic library.

    As animation.gsap.js from scrollmagic library is imported already in App, uninstall scrollmagic-plugin-gsap and remove from scrollExample these lines:

    import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

    The error in the console should go away. The error was logged because the plugin in scrollmagic-plugin-gsap and the one rolled in scrollmagic both add tweenChanges option.