Importing GSAP-3 Ease with Webpack

Using GSAP ease with Webpack / babel is not straightforward. Webpack needs to know independent references to link and optimize javascript.

Example

The following example leads to error when using with webpack:

import gsap from 'gsap'
gsap.to(elment, { duration:1, rotation: 180 ease: Power0.easeNone  })

Error message

The following error message is displayed in webpack build:

'Power0' is not defined

Solution

Gsap (gsap) is a module or namespace. It works if you import the whole module. Just change the way you import Gsap and use Gsap.<Ease>.

import * as Gsap from 'gsap'
Gsap.gsap.to(elment, { duration:1, rotation: 180 ease: Gsap.Power0.easeNone  })
|

Be Updated

Only articles are shared on Medium

This site uses third-party cookies to gather website usage and performance data.