InquisitiveBadger

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

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

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> ) } }