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.