Jump to content
Search Community

GSAP stop working on builded website, missing plugin

Breci test
Moderator Tag

Recommended Posts

Hello, I started using GSAP to do animations with VueJS.
Locally everything works, but when I build my Storybook and upload it, GSAP simply doesn't work anymore

GSAP version: 3.2.6

 

Here is the console

nI2sGxh.png


Live demo for the fade animation: http://breci.io/demo_bug/?path=/docs/components-ui-pagination--basic#with-animation

Here is the code used for the fade animation (other animations use a similar structure):

import { TimelineLite } from "gsap";
const ANIMATION_DURATION = 0.5;

export default {
  enter(el, done) {
    const timeline = new TimelineLite();

    timeline
      .fromTo(
        el,
        { position: "absolute", opacity: 0 },
        { position: "absolute", duration: 0.5 }
      )
      .set(el, { position: "unset", clearProps: "position" })
      .to(el, { duration: ANIMATION_DURATION, opacity: 1 })
      .eventCallback("onComplete", done);
  },
  leave(el, done) {
    const timeline = new TimelineLite();
    timeline
      .to(el, { duration: ANIMATION_DURATION, opacity: 0 })
      .eventCallback("onComplete", done);
  }
};

 

I assume it can be linked to the build process, anyone got a similar problem before?

 

Link to comment
Share on other sites

It looks like somehow your build process was way over-aggressive with tree shaking and it dumped CSSPlugin which is referenced internally. You did your imports from "gsap", right? (not "gsap/gsap-core")? 

 

You could try registering the plugin manually, like:

import { gsap, CSSPlugin, TimelineLite } from "gsap";

gsap.registerPlugin(CSSPlugin); // avoid tree shaking

That way, you're referencing the plugin directly in your code, preventing it from being tree-shaked. 

 

You really shouldn't have to do that. In fact, I don't think I've heard of anyone else running into this issue with any recent versions of GSAP. In my opinion, it's a bug with your build process. 

 

Also, on a side note, some of your animation code looked very odd to me: 

// BAD (there's no point in doing a fromTo() at all here
.fromTo(
  el,
  { position: "absolute", opacity: 0 },
  { position: "absolute", duration: 0.5 }
)

// BETTER: 
.set(el, {position: "absolute", opacity: 0});

// BAD (why set a position only to have it immediately cleared from the inline styles? This does nothing.)
.set(el, { position: "unset", clearProps: "position" })

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Looks like the problem was indeed from the tree-shaking of the last version of Storybook. After adding the line you mentioned it is now working.

Thank you @GreenSock
 

For the animation, I want to assign the position absolute and opacity 0 , wait 0.5seconds, then remove the absolute position and do the rest of the animation.
I'm working with Vuejs transition-group, so I'm waiting for the other components to be hidden from the list (not visible and not taking any width) before displaying the new ones.

How would you chain that?
 

Link to comment
Share on other sites

9 hours ago, Breci said:

I noticed the gsap.timeline() syntax, but I'd like to avoid importing all gsap to be able to do some tree-shaking for the final bundle. Is there a way?

Yeah, that's not gonna be an effective strategy. GSAP is a tightly integrated chunk of code that has lots of interdependencies internally - the whole timing mechanism is based on a root timeline. So you're getting the Timeline infrastructure anyway - might as well use them :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...