How to import gsap lib in the best way?

[Reginna]

I built the project animation with gsap on Nuxt.js and tried to analyze bundles.
The size of gsap is bigger than other module.

I tried two ways to build my project:

// use dist
import { gsap } from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'

// use normal
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'

 

If I included ScrollTrigger.js and ScrollToPlugin.js, the size of gsap was around 31 KB.

1. 

 

2.

 

I tried to import gasp with gsap-core and got error: "gsap.utils.checkPrefix is not a function"

// import gsap-core
import { gsap } from 'gsap/gsap-core'

 

The full code:

import Vue from 'vue'

// import { gsap } from 'gsap/gsap-core'
import { gsap } from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'

// [START] className Plugin for Gsap v3
// Gsap v3 remove tween className add and remove. Gsap Official recommend use vanilla JavaScript: className.add() & className.remove()
// Or use Plugin. Reference: https://codepen.io/GreenSock/pen/BaNRejV?editors=0010
// Try to use vanilla JavaScript add or remove class, non-essential to use this plugin. It is recommended to use stagger when you need it.
const classNamePlugin = {
	...
}
// [END] className Plugin for Gsap v3

if (process.client) {
	gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, classNamePlugin)
}

Vue.prototype.$gsap = gsap
Vue.prototype.$ScrollTrigger = ScrollTrigger

 

Is it possible to import gsap in another way to reduce the size?

 

---

 

gsap version: 3.5.1

See the Pen BaNRejV?editors=0010 by GreenSock (@GreenSock) on CodePen

[Cassie]

Hi there. There's also no gsap-core folder, so that's not going to work - UMD and ES Modules are also the same code, just different formats. There's not a way to import GSAP to make it smaller. However you import it - it's the same code.

It may be worth giving this a read.

There are also other smaller animation libraries, but you won't get all the functionality, cross browser support and flexibility. It's a trade off.