Jump to content
Search Community

Yoyo/repeat + Vue getting tree shaken?

Morgan Benton test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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