Roots Discourse

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:

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();, 0.8, {
          scrollTo: {
            y: "#servicios",
          ease: Bounce.easeOut,

This is the deployed site (click on the icons to see the scroll without bounce effect):

This is the JS:

And these are the webpack alias:

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();, 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.


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


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/ScrollMagic.js
    Used by 1 module(s), i. e.

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:


WebPack config:


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