Jump to content
Search Community

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

InquisitiveBadger test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone! New Club Greensock member here :) I'm loving GSAP so far! Hats off to the Greensock team for creating this wonderful tool.

 

Basically, I'm just trying to get React to compile after importing 'animation.gsap'. I haven't included a Codepen, as the app and ScrollMagic work -- but I can't get the right behaviour due to this animation.gsap issue. That said, do let me know if you want a Codepen up regardless.

 

I installed ScrollMagic via NPM.

 

I'm aware this issue was brought up before, but none of the solutions I could find have worked out for me :(. 

 

At the moment, I'm testing out scaling down my h2 header to half its size upon scroll to the section. 

 

 

Thanks in advance!

 

 

UPDATE:

 

I've loaded GSAP, ScrollMagic, and animation.gsap.js via CDN. While the former two are communicating, animation.gsap.js isn't. Apparently, it might be due to "setTween( )"? 

 

What would be the alternative to "setTween()"?

 

From ScrollMagic Troubleshooting Docs

 

2.2 Make sure it's a ScrollMagic issue and not related to your animation framework.

Many animation-related issues are caused by an animation framework (GSAP/Velocity) or a misuse thereof. A very common mistake for example, is that the selector for TweenMax turns up empty.

 

For GSAP the recommended best practice is to create your tweens, but refrain from adding them to the ScrollMagic scene object using setTween. This ensures that ScrollMagic doesn't manipulate the animations in any way.

 

If you have a look at your site now, you can check if the animations plays out the way you wanted to. If they don't, the problem is obviously not rooted in ScrollMagic.

 

/////////////

 

 

ERROR

 

Failed to compile
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Can't resolve 'TimelineMax' in '/Users/mabbs/Desktop/WebDevelopment/port-site2/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'

 

CODE

 

import React, {Component} from 'react'
import 'gsap';
import ScrollMagic from 'scrollmagic';
import '../../../node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js';
 
export default class Projects extends Component {
constructor(props){
super(props)


 
    this.controller = new ScrollMagic.Controller();
}
 
componentDidMount(){
new ScrollMagic.Scene({
triggerElement: "#scrollStarts",
duration: 400,
offset: 200
})
 
.setTween('#main-content', {
scale: 0.5
 
})
.setPin("#latest")
.addTo(this.controller)
 
}
 
render(){
return(
     <section className="projects-section" id="projects">
<div id="scrollStarts">
------ Test -------
</div>
       <div className="inner-wrapper" id="main-content">
         <h2 id="latest">My Latest Work.</h2>
       </div>
     </section>
)
}
}

See the Pen by (@) on CodePen

Link to comment
Share on other sites

2 hours ago, InquisitiveBadger said:

I've loaded GSAP, ScrollMagic, and animation.gsap.js via CDN. While the former two are communicating, animation.gsap.js isn't. Apparently, it might be due to "setTween( )"? 

 

First, ScrollMagic and animation.gsap are not GSAP products. Official ScrollMagic support can be found here:

https://github.com/janpaepke/ScrollMagic

https://support.scrollmagic.io

 

The docs you posted are simply describing how to narrow down where the problem is coming from. Basically remove all your ScrollMagic code, leaving only GSAP code. If there is no animation, the problem might be related to GSAP, otherwise the problem might be related to ScrollMagic.

 

So create your animation...

 

componentDidMount(){
 TweenMax.to('#main-content', 1, {
  scale: 0.5 
 }); 
}

 

If it animated correctly, then GSAP is working correctly.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

 

On 5/29/2019 at 2:16 AM, InquisitiveBadger said:

Thanks, OSUblake!  I managed to make it working using the 'react-scrollmagic' component. It might have just been a React thing...

Hey, could you paste what you came up with? I've been trying to work it out for quite a while and I'm getting the same issue. I can't find any useful documentation for react-scrollmagic either.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
On 7/4/2019 at 2:49 PM, MoreeZ said:

 

Hey, could you paste what you came up with? I've been trying to work it out for quite a while and I'm getting the same issue. I can't find any useful documentation for react-scrollmagic either.

 

Hey I ran into this roadblock earlier today. I don't know if you ever got it working, but I finally did a few hours ago and decided to share my success here just in case you or anyone else stumbles across this post and needs a little assistance.

 

Here is the link to my sandbox I created https://codesandbox.io/s/react-scrollmagic-gsap-8mp14

 

Doc used for react-scrollmagic: https://www.npmjs.com/package/react-scrollmagic

  • Like 1
Link to comment
Share on other sites

Hey Moreez, due to a number of other required React-related dependencies that clashed with ScrollMagic, I had to abandon GreenSock altogether for that project. I can say that NicholasAllen's approach is the one I took and it worked...that is, before the other plugins showed up and rained on my parade :)

Link to comment
Share on other sites

  • 4 months later...

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.

  • Like 3
Link to comment
Share on other sites

  • 3 months later...

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
  • Like 1
Link to comment
Share on other sites

Thanks for this. I have it working in part and have found I have to manually import the easing functions for some reason, so

 

 
import { gsap, Power4 } from 'gsap';
 

 

I'd like to add.indicators but cant seem to get this functionality to work, does anyone have any ideas? 

 

Thanks 

Link to comment
Share on other sites

For anyone interested...

 
The solution I came across that doesn't require you to alter your webpack.config.js file and actually works for me can be found here: https://github.com/janpaepke/ScrollMagic/issues/665

The gist of it is to make sure you have ScrollMagic and GSAP added via npm (hopefully that's obvious) as well as imports-loader:

npm install --save scrollmagic gsap
npm install --save-dev imports-loader

Then in the file you want to use ScrollMagic with GSAP do the following imports:

import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/dubug.addindicators';

Using Webpack 4.x and imports-loader 0.8.0

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
On 2/27/2020 at 2:50 PM, Jamesh said:

For anyone interested...

 
The solution I came across that doesn't require you to alter your webpack.config.js file and actually works for me can be found here: https://github.com/janpaepke/ScrollMagic/issues/665

The gist of it is to make sure you have ScrollMagic and GSAP added via npm (hopefully that's obvious) as well as imports-loader:


npm install --save scrollmagic gsap
npm install --save-dev imports-loader

Then in the file you want to use ScrollMagic with GSAP do the following imports:


import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/dubug.addindicators';

Using Webpack 4.x and imports-loader 0.8.0

Using GSAP 3 this doesn't work, I get this error

 

animation.gsap.js:39 Uncaught ReferenceError: TweenMax is not defined
    at animation.gsap.js:39
    at Object../node_modules/imports-loader/index.js?define=>false!./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js (animation.gsap.js:44)

Any ideas?

Link to comment
Share on other sites

import gsap from 'gsap'
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
 
Then when referencing do something like the following (note the use of gsap rather than TweenMax): 
 
document.querySelector('#swup').style.opacity = 0;
gsap.to(document.querySelector('#swup'), 0.5, {
opacity: 1,
});
 
rather than 
 
document.querySelector('#yourid').style.opacity = 0;
TweenMax.to(document.querySelector('#yourid'), 0.5, {
opacity: 1,
});
 
Does that help?! 
 
Link to comment
Share on other sites

4 minutes ago, Jamesh said:
import gsap from 'gsap'
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';
 
Then when referencing do something like the following (note the use of gsap rather than TweenMax): 
 
document.querySelector('#swup').style.opacity = 0;
gsap.to(document.querySelector('#swup'), 0.5, {
opacity: 1,
});
 
rather than 
 
document.querySelector('#yourid').style.opacity = 0;
TweenMax.to(document.querySelector('#yourid'), 0.5, {
opacity: 1,
});
 
Does that help?! 
 

 

Tried but I get

 

animation.gsap.js:39 Uncaught ReferenceError: TweenMax is not defined
    at animation.gsap.js:39
    at Object../node_modules/imports-loader/index.js?define=>false!./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js (animation.gsap.js:44)

I'm using GSAP 3 so I already was using gsap instead of TweenMax

Link to comment
Share on other sites

1 hour ago, Jamesh said:

I can try but I'm certainly no expert! Have you tried removing the animation.gsap.js plugin?  I have stopped using it and my animations work no problem.

I need animation.gsap.js plugin, can't remove that. Removing it get error:

 

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

Link to comment
Share on other sites

9 minutes ago, Tasty Sites said:

Hey,

As it goes for SM and GSAP, this was may life saver - https://github.com/jonkwheeler/ScrollScene
So far works like a charm at least in Vue, maybe that will help someone

 

@Tasty Sites I saw that while searching solutions but really don't understand what it is. It seems to change the syntax. I don't want to use another library, I'd like to keep original syntax and logic by ScrollMagic. Also I think it will add extra KB to the compiled JS. Maybe I don't get the point, could you simply explain what it is and why using it? Thanks

Link to comment
Share on other sites

It's using ScrollMagic under the hood, there were some problems with SM and es6 - so it's kind of a wrapper. Syntax is veeery similar - I really spent a day or two trying to use SM in Vue, and once it was working I couldn't really use .addIndicators.

This should make it much simpler, lot's of examples in the docs and it has everything that SM does plus intersectionObservers. 

Happy Tweening :)

Link to comment
Share on other sites

You can easily trigger animations on scroll without ScrollMagic. In fact, GreenSock is working on its own scroll plugin at the moment!

 

One method is to attach to the scroll event and look at the scroll position like so:

See the Pen BaNPoEK by GreenSock (@GreenSock) on CodePen

 

Another method is to use intersection observers like this post covers.

  • Like 2
Link to comment
Share on other sites

Hi @ZachSaucier

interesting, when will be ready this new plugin for replacing ScrollMagic?

 

I can understand your approach seen in your codepen but now I need to develop an horizontal scrolling like this one

 

See the Pen qBdewXg by netgloo (@netgloo) on CodePen

 

and frankly doing that with your approach is a bunch of maths, don't think it's so easy

Link to comment
Share on other sites

13 minutes ago, Black Ducas said:

when will be ready this new plugin for replacing ScrollMagic?

We don't have a finite timeline at this point but most likely relatively soon. We'll release it as soon as it's ready!

 

14 minutes ago, Black Ducas said:

I can understand your approach seen in your codepen but now I need to develop an horizontal scrolling like this one and frankly doing that with your approach is a bunch of maths, don't think it's so easy

If you set it up correctly, you don't have to do a bunch of maths. Just create a tween that moves the element to the left, create a bunch of empty space between the top and bottom sections, and then in that space affect the progress of your tween. Simple :) 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...