[How can I use GSAP 3 with scroll magic?]

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. 

 

npm install --save scrollmagic-plugin-gsap

import * as ScrollMagic from "scrollmagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems

import gsap from "gsap";  // Also works with TweenLite and TimelineLite: import { TweenMax, TimelineMax } from "gsap";

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

 

ScrollMagicPluginGsap(ScrollMagic, gsap);

 // There you can use setTween() in ScrollMagic Scene with no problems

 

[React-GSAP-ScrollMagic: "animation.gsap not found"]

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. 

 

npm install --save scrollmagic-plugin-gsap

import * as ScrollMagic from "scrollmagic"; // Or use scrollmagic-with-ssr to avoid server rendering problems

import gsap from "gsap";  // Also works with TweenLite and TimelineLite: import { TweenMax, TimelineMax } from "gsap";

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

 

ScrollMagicPluginGsap(ScrollMagic, gsap);

 // There you can use setTween() in ScrollMagic Scene with no problems