Skip to content
AngularJS Greensock experiment
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
asset
easing
plugins
utils
README.md
TimelineLite.min.js
TimelineMax.min.js
TweenLite.min.js
TweenMax.min.js
app.js
directives.js
factories.js
index.html
jquery.gsap.min.js
style.css

README.md

angularjs-gsap

AngularJS Greensock experiment

I needed an easy way to utilize TweenMax (GreenSock) in AngularJS to do the following:

Bind animations as overlays to the progression of a video. The factory and directive built for this handles start-keys and end-keys (like keyframes in a video editing software).

IMPORTANT

Set paused=true in the animate-object if bound to a master

Example

HTML

<video id="video" ng-click="control.play()" gsap-master>
    <source src="~.mp4" type="video/mp4">
</video>
<div style="opacity:0" gsap-animate="animation" >
    Fly in 2 sec into the video
</div>

In Controller

// defined animation
    $scope.animation ={
        animate:{
            scale:1.5,
            paused:true,
            opacity:1,
            ease:Elastic.easeOut.config(1, 0.3)
        },
        duration:3,
        action:'to',
        keyFrames:[{start:2,end:5}]
    };
    
    // use factory for controlling
    $scope.play = function(){
        animate.play();
    }

Animation-Object

Attribute Required Info
animate yes The GreenSock vars-Object
duration yes in seconds
action yes e.g. 'to' or 'from'
keyFrames no ObjArray. start & end can be set (in seconds)
You can’t perform that action at this time.