scrollmagic import animation.gsap and debug.addIndicators

Importing Scrollmagic without using the script but the import method made me struggle for a while. Missing plugin error, or the tween playing on load but not being linked to the scroll. Finally, I got it working with the package scrollmagic-plugin-gsap.

Scrollmagic import errors with gsap

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

I tried different things:

1. adding some “resolve” paths into webpack.config.js
2. import from node module folder directly in my js
3. use this: import ‘imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/dubug.addindicators’;

I found the answer in that thread https://greensock.com/forums/topic/20434-react-gsap-scrollmagic-animationgsap-not-found/

How to have scrollmagic import animation.gsap without error in ES6

https://www.npmjs.com/package/scrollmagic-plugin-gsap

Original animation.gsap.js plugin for ScrollMagic is not compatible with ES6 modules, so it’s causing a number of problems to add it in ES6 environment. Use this module to simple wrap ScrollMagic with animation.gsap.js in ES6. Has Typescript definition in module.

npm install --save scrollmagic-plugin-gsap

or

yarn install scrollmagic-plugin-gsap

Usage

import * as ScrollMagic from "scrollmagic"; // Or use scrollmagic-with-ssr to avoid server rendering problemsimport { TweenMax, TimelineMax } from "gsap"; // Also works with TweenLite and TimelineLiteimport { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap"; ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax); // There you can use setTween() in ScrollMagic Scene with no problems

UPDATE: I realized that didn’t solve the debug.indicator import very useful to develop.

So here is a better NPM package:

https://npm.io/package/scrollmagic-plugins