Breci Posted March 30, 2020 Share Posted March 30, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted March 30, 2020 Share Posted March 30, 2020 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! 3 Link to comment Share on other sites More sharing options...
Breci Posted March 30, 2020 Author Share Posted March 30, 2020 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 More sharing options...
elegantseagulls Posted March 30, 2020 Share Posted March 30, 2020 @Breci, It also looks like you're using the old gsap 2.x syntax, and you're importing gsap v3. It's mostly backwards compatible, but for efficiency, and es imports, you may want to convert to the gsap3 syntax. This may help with other issues/confusion down the road too. 2 Link to comment Share on other sites More sharing options...
Breci Posted March 30, 2020 Author Share Posted March 30, 2020 @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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 30, 2020 Share Posted March 30, 2020 38 minutes ago, Breci said: I'd like to avoid importing all gsap to be able to do some tree-shaking for the final bundle. Is there a way? AFAIK, no. So you might as well use the improved GSAP 3 syntax 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 30, 2020 Share Posted March 30, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now