[GSAP stop working on builded website, missing plugin]

@elegantseagulls

 

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?

[GSAP stop working on builded website, missing plugin]

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?
 

[GSAP stop working on builded website, missing plugin]

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

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?