Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
InquisitiveBadger

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

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

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

  • Like 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

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.
×