How do I load the indicators plugin?

Question

I have included the scrollmagic NPM package, and from the ScrollMagic docs I get that;

"To have access to this extension, please include plugins/debug.addIndicators.js."

How do I load the indicators into my project?

Here is my code:

import ScrollMagic from 'scrollmagic'

var controller = new ScrollMagic.Controller()
var scene = new ScrollMagic.Scene({/*ScrollMagic code inside here*/})
    .addIndicators({name: "Animation trigger"})
    .addTo(controller)

Look into this path `scrollmagic/scrollmagic/uncompressed/plugins`. You will find `debug.addIndicators.js`. You need to import this file. — Vishal Sharma, Aug 04 '16 at 09:34
Not working. I tried to import debug.addIndicators.js alone, alonside with scrollmagic, different orders... nothing happers. addIndicators() doesn't show anything. When I import both of them, the are errors because names overlap. — Alberto Torre, Oct 14 '20 at 15:20

Vlad · Answer 1 · 2021-03-20T15:54:35.263

Please add this part to your webpack.config.js

 resolve: {
    alias: {
        "TweenLite": path.resolve('node_modules', 'gsap/src/uncompressed/TweenLite.js'),
        "TweenMax": path.resolve('node_modules', 'gsap/src/uncompressed/TweenMax.js'),
        "TimelineLite": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineLite.js'),
        "TimelineMax": path.resolve('node_modules', 'gsap/src/uncompressed/TimelineMax.js'),
        "ScrollMagic": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/ScrollMagic.js'),
        "animation.gsap": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js'),
        "debug.addIndicators": path.resolve('node_modules', 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
    },
  },

And then use that in your js file:

import ScrollMagic from "scrollmagic/scrollmagic/uncompressed/ScrollMagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
import TweenMax from "gsap/src/uncompressed/TweenMax";
import TimelineMax from "gsap/src/uncompressed/TimelineMax";

More information you can find here -> https://www.grzegorowski.com/scrollmagic-setup-for-webpack-commonjs

P.S. I did it and now it works.

UPDATE: The solution above works with older version of GSAP. For new version 3+ you can find nice information here -> https://greensock.com/forums/topic/20434-react-gsap-scrollmagic-animationgsap-not-found/

My imports with ScrollMagic 2.0.7 and GSAP 3.6.0 looks:

import ScrollMagic from "scrollmagic";
import "scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators";
import { gsap, Power1 } from "gsap";
import { TweenMax, TimelineMax } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

Don't forget to install scrollmagic, gsap and scrollmagic-plugin-gsap

How do I load the indicators plugin?

1 Answers1