ember-gsap v1.0.1
Ember GSAP

Ember GSAP allows consumption of GSAP - Greensock Animation Platform as ES6 Module imports in Ember applications.
Installation
ember install ember-gsap
Demo
Check out this Ember Twiddle demo to show Ember GSAP in action.
Usage
Ember GSAP by default includes TweenMax
, TweenLite
, TimelineLite
, TimelineMax
, CSSPlugin
, RoundPropsPlugin
, BezierPlugin
, AttrPlugin
, DirectionalRotationPlugin
, and all of the easing functions Power1
, Power2
, Power3
, Power4
, Back
, Bounce
, Circ
, Cubic
, Elastic
, Expo
, Linear
, Sine
, RoughEase
, SlowMo
and SteppedEase
.
Recommended import style is as follows:
import { TimelineMax, TweenMax, easing } from 'gsap';
const { Power2, Back, Elastic } = easing;
Easing functions can also be directly imported like so:
import { Power2, Back, Elastic } from 'gsap/easing';
Core Libraries
To prevent Ember GSAP from importing TweenMax
, which automatically includes all the utilities listed above, you can cherry pick the core libraries and plugins you wish to include.
// config/environment.js
ENV['ember-gsap'] = {
core: [
'TweenLite',
'TimelineLite'
]
}
GSAP Plugins
Popular Greensock Plugin libraries can be enabled like so:
// config/environment.js
ENV['ember-gsap'] = {
plugins: [
'draggable',
'scrollTo'
]
}
Plugin | Key | Included in TweenMax? | Import |
---|---|---|---|
Attr | attr | ✓ | |
Bezier | bezier | ✓ | |
ColorProps | colorProps | ||
CSS | css | ✓ | |
CSSRule | cssRule | ||
DirectionalRotation | directionalRotation | ✓ | |
Draggable | draggable | import { Draggable } from 'gsap'; | |
Easel | easel | ||
Modifiers | modifiers | ||
Raphael | raphael | ||
RoundProps | roundProps | ✓ | |
ScrollTo | scrollTo | ||
Text | text |
Fastboot
Ember GSAP >=0.3.0 is fully compatible with all versions of Ember CLI Fastboot.