Using greensock with a browser

I cannot get TweeLite to work with the browser. I'm an extreme noob when it comes to CommonJS.

I installed gasp v1.13.2 using Bower and enabled it like this:

var TweenLite = require("../../bower_components/gsap/src/minified/TweenLite.min.js");


I have no errors in use, but my animations are not working. According to the gsap docs this version should work unlined. What am I doing wrong? Can anyone provide a working example?

I've just started working on a project, so I don't have any interesting code to show. I am using the gulp-starter template .


source to share

2 answers

Try using uncompressed GSAP libraries. I use them successfully via browserify

and install using bower

. Like this:

var TweenLite = require('../bower_components/gsap/src/uncompressed/TweenLite.js');
var TimelineLite = require('../bower_components/gsap/src/uncompressed/TimelineLite.js');
var CSSPlugin = require('../bower_components/gsap/src/uncompressed/plugins/CSSPlugin.js');


However, if I switch to compressed assemblies browserify

, it no longer finds modules.

It looks like the compression methods used to generate mini-compilations somehow broke the export of modules.



GSAP is also available via NPM, so you can install it via:

npm install gsap --save


and use it in the same way as other libraries mentioned in the gulp-starter project, for example in

_          = require 'underscore'
Backbone   = require 'backbone'
Backbone.$ = require 'jquery'
plugin     = require 'plugin'
//this line below makes TweenLite available in the browser in my quick tests.
gsap       = require 'gsap'




All Articles