Ilkin Namazov

Hi All, After escalating this issue for 1 month I guess I found great solution. So this issue shows that in React environment we can not get animation.gsap file. This fix does not require any webpack changes except animation.gsap file itself. 1. Find these files in "node_module" directory tree (may have different location on you PC) and import it in this way to your working JS file (App.js for example). import "../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; import "../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators"; 2. Go to animation.gsap and add these two lines of code at the beginning of file. import { TimelineMax, TweenMax, TweenLite} from "gsap/all"; import ScrollMagic from "scrollmagic"; 3. Go to debug.addIndicators and add this line of code at the beginning of file (in case if you need indicator debugger, but I strongly suggest not to skip this step). import ScrollMagic from "scrollmagic"; 4. In animation.gsap find first function and delete all "root" variables and change them to variables that I provided below. ( you should find 8 of them). Before: (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory); } else if (typeof exports === 'object') { // CommonJS // Loads whole gsap package onto global scope. require('gsap'); factory(require('scrollmagic'), TweenMax, TimelineMax); } else { // Browser globals factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite); } } After: (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory); } else if (typeof exports === 'object') { // CommonJS // Loads whole gsap package onto global scope. require('gsap'); factory(require('scrollmagic'), TweenMax, TimelineMax); } else { // Browser globals factory(ScrollMagic || (jQuery && jQuery.ScrollMagic), TweenMax || TweenLite, TimelineMax || TimelineLite); } } 5. In debug.addIndicators also delete all "root" variables ( you should find 4 of them ) and change them to variables that I provided below. Before: (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['ScrollMagic'], factory); } else if (typeof exports === 'object') { // CommonJS factory(require('scrollmagic')); } else { // no browser global export needed, just execute factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic)); } } After: (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['ScrollMagic'], factory); } else if (typeof exports === 'object') { // CommonJS factory(require('scrollmagic')); } else { // no browser global export needed, just execute factory(ScrollMagic || (jQuery && jQuery.ScrollMagic)); } } I hope this solution will work for you. In any case you can reach me for help.

Hi @mikel, Thank you for your help ! I have read this article before, probably I did not investigate it properly, so I will play with this demo again. I would be great if you show similar example with https://www.rezo-zero.com/ since I'm new in animating. Thanks, IN

Hi Everyone, I have been struggling for 2 mouths on this animation and I gave up and i'm asking for help to reproduce this parallax animation. If you take a look at https://www.rezo-zero.com/ home page you can see 3 images that are moving when user is scrolling. I realized that "mask" container gets bigger when is scrolled down and at some point it gets smaller, also I observed that images inside of their containers are moving up and down. I tried to solve it by using GSAP with ScrollMagic but unfortunately I have not reached my goal. I would be appriated for any help to reproduce this effect. Thanks.