willviles / ember-gsap

GSAP - Greensock Animation Platform as ES6 Modules for Ember.js applications.

⚠️ Ember GSAP is deprecated in favour of using ember-auto-import

New happy path:

1. Install Ember Auto Import

ember install ember-auto-import

2. Install GSAP as a devDependency.

npm install --save-dev gsap 

3. Import away, following GSAP docs.

import TweenMax from 'gsap/TweenMax'

---

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.

ember-gsap's Issues

Add acceptance tests

Add an acceptance test to check GSAP is functioning and any plugins are functioning too.

Prod build fails after installing ember-gsap at minification step

After installing ember-gsap, my app prod build fails at the minification step.

After debugging I realized that this is due to the usage of => function in vendor/gsap-shim.js line 32.

Once I remove the arrow function, the app is building successfully.

Reproduced here: https://github.com/selvaa89/test-gsap

Add demo

Hello. I was just looking for slick ways of getting gsap into projects without any fuss and came across this. With no stars (now 1) - I wasn't really sure if this was complete etc / so I built a little test in ember-twiddle (who has no documentation about using addons) so, really I was testing addon support - and this addon... and I made this: https://ember-twiddle.com/f61209fc8ad1f1e85613f8f4ef4573e1

It's nothing great - but maybe you could use it as a starting point for a quick and easy demo and link to it so people can be sure this thing is functional and start using it. : )

ember install ember-gsap error

ember install ember-gsap fails with npm install --save-dev --loglevel error ember-gsap
npm ERR! tar.unpack untar error ...\npm-cache\ember-gsap\0.3.2\package.tgz

NPM package seems broken

Hey @willviles is there a possibility, that npm package was released with one version of master, and then master was rebased? npm/yarn tries to install package with commit 572c8ea54ec9884007bae708d2c33c6b746b48aa that do not exist, and latest one, that is marked as 0.3.1 is b76c135.

I think you need to re-publish 0.3.2 to npm, so it gets a correct commit :)

From yarn, the one that do not work.

[email protected]:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/ember-gsap/-/ember-gsap-0.3.1.tgz#572c8ea54ec9884007bae708d2c33c6b746b48aa"
  dependencies:
    ember-cli-babel "^5.1.7"
    gsap "^1.19.1"

I've manage to work by pinning exact commit:

ember-gsap@willviles/ember-gsap#b76c13529e176b8704a3a3d1f7eb4d21bc87e6ef:
  version "0.3.1"
  resolved "https://codeload.github.com/willviles/ember-gsap/tar.gz/b76c13529e176b8704a3a3d1f7eb4d21bc87e6ef"
  dependencies:
    ember-cli-babel "^5.1.7"
    gsap "^1.19.1"

Add broccoli-debug

Add broccoli-debug, so the Broccoli pipeline is output to /DEBUG when the following command is run:

BROCCOLI_DEBUG=ember-gsap:* ember serve

Request - Draggable

Appreciate the addon, would it be possible to include Draggable as an optional import?

https://greensock.com/draggable

Add images to README

How to load `Club GreenSock` plugins

We have a Club GreenSock membership and would like to load some of the other goodies gsap comes with. Unfortunately I dont see a way to load these with this addon. I guess I have to use the vendor directory to side load them somehow, or do you have a better Idea ??

scrollTo

ive tried to use scrollTo plugin and follow your instruction but to no avail.

ENV['ember-gsap'] = { plugins: [ 'scrollTo' ] };