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.