Roots Discourse

GSAP + webpack with easing effects

sage9

#1

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!


#2

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.


#3

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


#4

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


#5

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