GSAP + webpack with easing effects

Hi, I have GSAP installed and working but easing effects doesn’t work at all.

I have a codepen working with a simple bounce ease effect: https://codepen.io/aitormendez/pen/VGoaMQ

When I try to do the same thing in Sage, the easing effect doesn’t work. Maybe, it could be a webpack configuration issue, I’m not sure.

I’m trying to import Bounce in this way. It prevents 'Bounce' is not defined eslint error but it doesn’t work:

import TweenMax from 'gsap/src/uncompressed/TweenMax';
import 'gsap/src/uncompressed/plugins/ScrollToPlugin';
import Bounce from 'gsap/src/uncompressed/TweenMax';

$("a.icono").click(function(event) {
        event.preventDefault();
        TweenMax.to(window, 0.8, {
          scrollTo: {
            y: "#servicios",
          },
          ease: Bounce.easeOut,
        });
      });

This is the deployed site (click on the icons to see the scroll without bounce effect):
https://stage.quercusoficinasydespachos.com/

This is the JS:
https://bitbucket.org/aitormendez/quercusoficinasydespachos/src/8c1bfbd5065004480e37d71442b19bdf9327dcb4/web/app/themes/qod/resources/assets/scripts/routes/common.js?at=master

And these are the webpack alias:
https://bitbucket.org/aitormendez/quercusoficinasydespachos/src/8c1bfbd5065004480e37d71442b19bdf9327dcb4/web/app/themes/qod/resources/assets/build/webpack.config.js#lines-160:167

So, What is the problem here? What is the right configuration to get easing working? Thanks!

Hey @aitor,

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.

1 Like

Thank you so much to get inside the problem and all explanations, @mmirus!! It works.

1 Like

Just for explain the alias needed. For use GSAP and ScrollMagic together, there is a malfunction with WebPack that I don’t understand completely:

Here is an explanation and a fix (don’t work for me):

Another fix implies the use of aliases (it works for me):

And somebody mention it even in this forum:

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:

Working deployed site: https://stage.quercusoficinasydespachos.com/

JS: https://bitbucket.org/aitormendez/quercusoficinasydespachos/src/51c3f557344243bb03374136fac38939868d5315/web/app/themes/qod/resources/assets/scripts/routes/home.js#lines-2:12

WebPack config: https://bitbucket.org/aitormendez/quercusoficinasydespachos/src/51c3f557344243bb03374136fac38939868d5315/web/app/themes/qod/resources/assets/build/webpack.config.js#lines-159:165

3 Likes

Ah, gotcha. Seems like ScrollMagic is a little wonky–at least there’s a workaround.

1 Like

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 :scream: 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. :upside_down_face:

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:

It’s in the node_modules folder but it only affects debugging, so…

2 Likes

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

did you have the same problem?

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.