GSAP + webpack with easing effects

sage
,
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.

1 Like