Timeline Test

by soulwire

HTML

<script src="https://rawgithub.com/greensock/GreenSock-JS/master/src/minified/TimelineMax.min.js"></script>
<script src="https://rawgithub.com/greensock/GreenSock-JS/master/src/minified/TweenMax.min.js"></script>
<script src="https://rawgithub.com/greensock/GreenSock-JS/master/src/minified/plugins/CSSPlugin.min.js"></script>
<script src="https://rawgithub.com/greensock/GreenSock-JS/master/src/minified/easing/EasePack.min.js"></script>
<div id="container">
    <div id="s1" class="sprite" style="background:red"></div>
    <div id="s2" class="sprite" style="background:green"></div>
</div>

CSS

#container {
    -webkit-perspective: 600px;
    position: absolute;
}
.sprite {
    position: absolute;
    height: 200px;
    width: 200px;
}

JavaScript

/*

Notes:

    Looping and seeking only works when executed on the timeline that specifies repeat and yoyo options
    So, the timeline must consist of: [ intro | loop ] and have repeat and yoyo set
    OR specify repeat and yoyo on the loop timeline so that the intro isn't included in the loop, then
    skip to the 'loop' label time + random loop.duration
    Repeat and yoyo can't be set on both though

    Struture

    each composition layer has a timeline with an intro and a loop - layout specific animations
    the composition container also has a timeline with generic animations
    on beat, scrub all of the timelines individually

Composition adds a timeline to Sprites if needed - these are destored when the Sprite is
Compositions apply animations to the container's timeline
Animation adds generic animations to Composition layers (test whether child animations can be pushed to this)
Animation scrubs timelines on beat

This modification shows how to use nested looping timelines - you just need to get the accurate total time of the loops
without repeats

*/

// Separate timelines test

var s1 = document.getElementById( 's1' );
var s2 = document.getElementById( 's2' );
var c = document.getElementById( 'container' );

// s1 timeline

s1.timeline = new TimelineMax();

s1.intro = new TimelineMax();
s1.intro.add( TweenMax.from( s1, 0.5, { scale: 0 } ), 0 );

s1.loop = new TimelineMax({ repeat: -1, yoyo: true });
s1.loop.add( TweenMax.to( s1, 1.1, { rotationZ: 45 } ) );
s1.loop.add( TweenMax.to( s1, 0.5, { rotationY: -100 } ) );

s1.timeline.add( s1.intro, 'intro' );
s1.timeline.add( s1.loop, 'loop' );

// s1 timeline

s2.timeline = new TimelineMax();

s2.intro = new TimelineMax();
s2.intro.add( TweenMax.from( s2, 0.85, { x: 1000 } ), 0 );

s2.loop = new TimelineMax({ repeat: -1, yoyo: true });
s2.loop.add( TweenMax.to( s2, 1.6, { y: 100 } ) );

s2.timeline.add( s2.intro, 'intro' );
s2.timeline.add( s2.loop, 'loop' );

var mainTimeline = new...