Quick note up front: you don’t need to use $(document).ready in your route init or finalize code. That’s already taken care of by how the routes are loaded (see the bottom of main.js).
Give the below a shot. I used the HTML and JS from your pen for testing, except that i used TweenMax instead of TweenLite to make it closer to your theme code.
First, I’m assuming you installed GSAP like this: yarn add gsap
And that you’re using GSAP v2.
Then in your common.js file:
import { TweenMax, Bounce } from "gsap/all";
export default {
init() {
// JavaScript to be fired on all pages
$("a.button").click(function(event) {
event.preventDefault();
TweenMax.to(window, 0.8, {
scrollTo: {
y: "#dest",
},
ease: Bounce.easeOut,
});
});
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
},
};
That gets the scroll + bounce effect from your pen working.
You shouldn’t need the aliases or anything else like that.
PS - thanks for providing access to so much code / info about your problem. Makes it much easier to troubleshoot things.
If I remove GSAP aliases I get this error at yarn build:
These dependencies were not found:
* TimelineMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
* TweenLite in ./node_modules/gsap/src/minified/TimelineMax.min.js, ./node_modules/gsap/src/minified/plugins/ScrollToPlugin.min.js
* TweenMax in ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
If I remove ScrollMagic aliases I get another error:
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/ScrollMagic/scrollmagic/uncompressed/ScrollMagic.js
Used by 2 module(s), i. e.
/Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
* /Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js
Used by 1 module(s), i. e.
/Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/cache-loader/dist/cjs.js!/Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/buble-loader/index.js??ref--2-1!/Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/eslint-loader/index.js!/Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/node_modules/import-glob/index.js!/Volumes/B/Documentos/trellis3/quercusoficinasydespachos/web/app/themes/qod/resources/assets/scripts/routes/home.js
Of course, it is only for ScrollMagic, not GSAP, the topic of this thread. Just to give my final solution, this is that work for me. Any suggestions will be appreciated:
We are doing something wrong here. This configuration added 400KB to my main.js after building for production. If I just reference all the minified js directly it takes less than 160KB, so it adds about 240KB of fat.
Has someone managed to get a lighter configuration?
Okey, I was ready to dropping GSAP and going back to old CSS3 because of the huge js file (it was 600KB which is basically the whole GSAP library), but by chance I found a better solution.
First, all this trouble with alias and setups comes from the animation.gsap plugin. Some hero did this package that solves all this issues in a clean way.
But! After using it you will see the js is still fat. I don’t know why this happens, as in GSAP forums they say using gsap/all does treeshaking, but this didn’t happen in my case. So the solution (if you want simple animations) is to reference the package you need directly and ignore the GSAP instructions:
import * as ScrollMagic from 'scrollmagic';
import { TweenLite } from 'gsap/TweenLite.js';
import 'gsap/CSSPlugin';
import { ScrollMagicPluginGsap } from 'scrollmagic-plugin-gsap';
ScrollMagicPluginGsap(ScrollMagic, TweenLite);
This results in a super light setup, which I think many people are looking for.
P.S. If you want to add the indicators for debugging, just make sure you change this define from ScrolMagic to lowcase otherwise it gives an error:
@SergiArias I followed your suggestion and I am using scrollmagic-plugin-gsap.
did you import this just in the common.js file or inside each js route?
the reason for this question is that if I add this in the common.js it doesn’t work, if I add this inside each route (only the pages where I need scrollmagic) works but the console gives me this error:
ScrollMagic.Scene -> Cannot add Scene option 'tweenChanges', because it already exists.
Mmmh, I added it where I needed it. In my case I added the scrollmagic in common.js and in the routes I needed it. The reason being is that I declared the scrollmagic controller in a variable in common.js and I imported it everywhere I needed to change the scenes.
I don’t know exactly why you get this problem, but I think it’s unrelated to my setup, as my setup is oriented to minimize the gsap size. Did you try the recommended setup by both plugins before mine?
Anyway, bear in mind that GSAP upated to a new version recently, so my setup can be incompatible with this update.