Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
teejay_hh

Import business green plugins into ember app.

Recommended Posts

Hello, I am an ember developer and convinced my company to have a closer look at gsap and they did. So we are gsap member and I am now kinda struggling to figure out how I can use the shiny plugins which are not free to use. 
I use an ember package -> https://github.com/willviles/ember-gsap  to load gsap into an ember application. 

You can import gsap via an es6 import
 

import { TimelineMax } from 'gsap'


The ember gsap addon doesnt support any of the business green plugins so I am looking for workarounds. In ember you can add files to the vendor folder which then can be loaded on startup. 

I know this is very framework specific and I probably dont find anyone here with ember knowledge. 

so in the ember-cli-build.js you can add something like this. 

 

  app.import('vendor/CustomEase.min.js')
  app.import('vendor/CustomBounce.min.js')
  app.import('vendor/CustomWiggle.min.js')

 

Which now makes the plugins available. The only thing left todo is to import them where you need them. Which is my problem.

 

I dont really know how to import  `import CustomWiggle from  ?????` it. Any tips ??

Link to comment
Share on other sites

I don't know Ember. Is that package necessary? Have you tried importing without it?

Link to comment
Share on other sites

That package is a community addon which makes it pretty easy to add just TimelineMax or specific easting to the ember build.  I have not tried it without the addon, which would still leave me with what would I need to import to actually use Tweenmax for instance.

I tried this 
https://guides.emberjs.com/v2.13.0/addons-and-dependencies/managing-dependencies/#toc_amd-javascript-modules

 

app.import('vendor/CustomWiggle.min.js', { exports: { wiggle: ['CustomWiggle'] } })

 

and then 

 

import { CustomWiggle } from 'wiggle'


But no luck.

Edited by teejay_hh
Link to comment
Share on other sites

That has a dependency on CustomEase, so I'm not sure how you would do that.

 

Try importing stuff without a name.

 

And see what's loaded by logging this out.

 

console.log(window.com.greensock)

 

 

  • Like 2
Link to comment
Share on other sites

19 minutes ago, teejay_hh said:

 


app.import('vendor/CustomWiggle.min.js', { exports: { wiggle: ['CustomWiggle'] } })

 

 

One of the problems with GSAP exports is the "default", so like in TypeSctipt you have to import differently. Don't know if it is the same issue with Ember.

 

import * as CustomWiggle from "wiggle";

 

So I would also try.

app.import('vendor/CustomWiggle.min.js', { exports: { wiggle: ['default'] } })

 

  • Like 2
Link to comment
Share on other sites

It would be under easing if it's loaded

  • Like 1
Link to comment
Share on other sites

window.com.greensock.easing.CustomWiggle.create('myWiggle', { wiggles: 6 })


this works, but its really not a fantastic way to do this in ember.  I will keep dabbling and see if I can get it to work in more emberish way.

Thx a lot for your help. 

Link to comment
Share on other sites

Ok I got something. 

I created a shim which created the wiggle namespace. 

 

/* global define, self */

(function() {
  var plugins = {
    'CustomEase': CustomEase,
    'CustomWiggle': CustomWiggle,
  };

  define('wiggle', [], function() {
    'use strict';
    return plugins;
  });

})();

 

Then you can add the the imports to the ember-cli-build.js file
 

app.import('vendor/CustomEase.min.js')
app.import('vendor/CustomWiggle.min.js')
app.import('vendor/gsapShim.js', { exports: { 'wiggle': ['CustomWiggle', 'CustomEase'] } })


And then you can use it like this in your components.

 

import { CustomWiggle } from 'wiggle'

 

  • Like 2
Link to comment
Share on other sites

Excellent, thanks for letting us know. It's always nice to have the solution here so that others can benefit in the future. Happy tweening!

  • Like 1
Link to comment
Share on other sites

Totally, I am happy to share. Love gsap, keep up the amazing work.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×