2

-I am using react framework. (create-react-app), and ScrollMagic Library, and am trying to implement the scrollmagic library in reactjs framework.I am unable to import the following Scripts.

I have imported scrollmagic as follows

import * as ScrollMagic from 'scrollmagic'

But i am unable to use this functionality ->setTween() as they cannot be accessed.

Following is the error log.

15:41:01:381 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

I've tried importing external cdn scripts into public/index.html, but no luck. I've also tried this import('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap') import('scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators')

But no luck. error logs after above import

Module not found: Can't resolve 'TimelineMax' in '~\node_modules\scrollmagic\scrollmagic\uncompressed\plugins'

I've been messing up with it for a long time and I'll be really thankful for the solution.

Thank you

Manjot Singh
  • 184
  • 1
  • 2
  • 13
  • Check out the solutions here: https://stackoverflow.com/questions/36853288/scrollmagic-with-react One of them might help you. – AndrewL64 Jun 18 '18 at 10:45
  • @AndrewL , the solutions in there seems curtailed. They won't help. – Manjot Singh Jun 18 '18 at 10:52
  • 1
    The library supports both AMD syntax and CommonJS. If you are using Webpack, you have to tell it to stop using the AMD syntax. Try this solution: https://stackoverflow.com/a/35531127/1659076 – Jonny Feb 03 '20 at 01:28

2 Answers2

1

The solution for me was to use https://www.npmjs.com/package/scrollmagic-plugin-gsap

Problem is that animation.gsap.js needs to have import of TweenMax inside of file. I was not able to pass the TweenMax object to it and editing animation.gsap.js directly is obviously not the way to go.

But this plugin can handle it. So this worked for me:

  1. Remove import('scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap')
  2. Input ScrollMagicPluginGsap instead. That includes the animation.gsap along with TweenMax for you.
import { TweenMax, TimelineMax } from "gsap"; // What to import from gsap
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
 
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax); // Pass gsap import to Scrollmagic

Disclaimer:

  • I am javascript newbie
  • using parceljs, so no idea re webpack, rollup or other package manager
Nedvajz
  • 891
  • 8
  • 13
  • Was upgrading from gsap 2 to gsap 3 and this is the solution that worked for me. – Ian Mar 31 '22 at 14:16
-2

Try reordering your scripts in your HTML document. Start with GSAP TweenMax CDN and then add ScrollMagic CDN links. Lastly, you'll have your GSAP Animation Plugin. It all is just about the scripts orders so the necessary libraries and their methods can be read first.

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

<!-- ScrollMagic -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.js"></script>

<!--GSAP animation plugin should be placed after ScrollMagic! -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
xkx
  • 25
  • 2