Two.js and TimelineMax

This Fiddle shows how to use TimeilneMax in conjunction with Two.js

by jonobr1

HTML

<script src="http://jonobr1.github.com/two.js/third-party/two.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.1/TweenMax.min.js"></script>

JavaScript

var two = new Two({
    fullscreen: true,
    autostart: true
}).appendTo(document.body);

var points = [
    new Two.Anchor(),
    new Two.Anchor(),
    new Two.Anchor()
];
var dests = [
    { x: 0, y: - 70 },
    { x: -70, y: 50 },
    { x: 70,  y: 50 }
];

var a = new Two.Polygon([points[0].clone(), points[1].clone()]);
var b = new Two.Polygon([points[1].clone(), points[2].clone()]);
var c = new Two.Polygon([points[2].clone(), points[0].clone()]);

var triangle = two.makeGroup(a, b, c);
triangle.translation.set(two.width / 2, two.height / 2);

var timeline = new TimelineMax();
var j = 0;

_.each(triangle.children, function(child, i) {
    var origin = dests[mod(j - 1, dests.length)];
    var dest = dests[j];
    child.vertices[0].copy(origin);
    child.vertices[1].copy(origin);
    timeline.to(child.vertices[0], 1, dest);
    j++;
});
    
function mod(v, l) {
    while (v < 0) {
        v += l;
    }
    return v % l;
}