Jump to content
Search Community

Import business green plugins into ember app.

teejay_hh test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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

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

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

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.
×
×
  • Create New...