Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Morgan Benton

Yoyo/repeat + Vue getting tree shaken?

Recommended Posts

I'm building a VueJs component, and when I build in production mode, the yoyo and/or repeat properties are not working. Here's the relevant bit of my code:

 

// import libraries
import { TimelineMax, Bounce, Back, BezierPlugin, CSSPlugin } from 'gsap/all'

// create a timeline
const tl = new TimeLineMax({ paused: true })

// add a pulsing glow (uses a custom CSS variable)
tl.to('div', 1, { '--some-var': '20px', repeat: -1, yoyo: true })

// fire it up!
tl.resume()

// eslint-disable-next-line no-unused-vars
const dontTreeShakeBezierAndCSS = [BezierPlugin, CSSPlugin]

 

The animation works once, but then stops, which seems to indicate that either the `repeat` or `yoyo` (or both) is getting tree-shaken or is otherwise not getting included in my final bundle.

 

It feels like I'm just importing the wrong things. Any ideas on how to fix?  Thanks!

 

P.S. I didn't include CodePen because there's no build step there that would allow me to recreate the problem.

Link to comment
Share on other sites

Hm, try importing (and protecting) TweenMax:

// import libraries
import { TweenMax, TimelineMax, Bounce, Back, BezierPlugin, CSSPlugin } from 'gsap/all'

// create a timeline
const tl = new TimeLineMax({ paused: true })

// add a pulsing glow (uses a custom CSS variable)
tl.to('div', 1, { '--some-var': '20px', repeat: -1, yoyo: true })

// fire it up!
tl.resume()

// eslint-disable-next-line no-unused-vars
const dontTreeShakeBezierAndCSS = [TweenMax, BezierPlugin, CSSPlugin]

 

Does that resolve things?

  • Like 2
Link to comment
Share on other sites

Yes! That fixed it.

 

Do you have any suggestions for ways to reduce bundle size? For example, is there a way to get the repeat/yoyo effect while still just using TimelineLite?

 

I haven't really begun my optimization process in earnest, yet, but the changes above increased the bundle by 75k.

 

Thanks!

Link to comment
Share on other sites

Repeating/yoyoing are part of the "Max" stuff. You could try importing all those classes from "gsap/TweenMax" instead of "gsap/all" because TweenMax includes TimelineLite, TimelineMax, TweenLite, CSSPlugin, and several other tools. But depending on your bundler, that may not really help. 

 

Glad you got it working!

  • Like 1
Link to comment
Share on other sites

Thanks for the suggestions! I added a "resolved" tag to this thread. Is there any other way to mark it as "solved?"

Link to comment
Share on other sites

Nah, no need. It's fine, but thanks for asking! 

 

Happy tweening!

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.
×