Com­plex an­i­ma­tions

Beyond one or two tweens, you’ll need time­lines

Web Designer - - Create With The Greensock Animation Platform -

Think of a time­line as a con­tainer for all your tweens, where you as­sign them start times and du­ra­tions, just like a sched­ule. GSAP in­cludes a time­line ob­ject to do ex­actly that. You can ap­pend all your tweens to the time­line and then man­age it as a larger ob­ject. You can ad­just the se­quence order and tim­ing to get the right over­all tim­ing you need. Here’s a quick ex­am­ple: //cre­ate a time­line in­stance­var tl = new Time­line­max();

// add a tween to it tl.add( Tween­max.to(“.logo1”, 1, {x:50}) );

// note the fi­nal “0” to make this one start at 0 sec. tl.add( Tween­max.to(“.logo2”, 1, {y:100} ),”0” );

//note the “+.25” to make this one start at .25 sec tl.add( Tween­max.to(“.logo3”, 1, {ro­ta­tiony:180, y:50, X:50}),”+.25” ); Sim­i­lar to time­lines in apps like Af­ter Ef­fects, you can have over­lap­ping an­i­ma­tions, gaps be­tween them, and vir­tu­ally as many as you need. As the time­line’s play­head moves, it scrubs across its tween and ren­ders them. You can pause, re­sume, re­verse and con­trol time­lines just like an­i­ma­tions. You can also add pa­ram­e­ters to the time­line to ‘re­peat’, ‘yo-yo’ and add call­backs for the en­tire time­line. You can even ad­just the en­tire time­line speed us­ing the ‘timescale’ prop­erty. Very cool.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.