This repository was archived by the owner on Nov 26, 2022. It is now read-only.
Description Implement gsStage as 0..n groupings with gsTimelines. Stages act as sequential chained phases of an animation; wrapped in optional resolvers that must resolve before the next stage will be started
Each stage can have 0..n gsSteps or even child gsTimelines.
Each stage may have before and after resolvers.
< gs-timeline state ="zoom " time-scale ="{{ timeScale }} " >
< gs-stage name ="start ">
< gs-step target ="#circle " style ="scale:1.2;opacity:0 " > </ gs-step >
< gs-step target ="#album " style ="left:-400;top:-400; " > </ gs-step >
< gs-step target ="#details " style ="display:none; " > </ gs-step >
< gs-step target ="#album " style ="display:none;opacity:1 " > </ gs-step >
< gs-step ng-if ="animateAlbum() " target ="#album " style ="bounds:{{ album.from }} " > </ gs-step >
< gs-step target ="#details " style ="display:block; " > </ gs-step >
< gs-step eval ="thomas=true " target ="#album " style ="display:block; " > </ gs-step >
< gs-step target ="#nowPlaying " style ="z-index:100; " > </ gs-step >
</ gs-stage >
< gs-stage name ="zoom " download-all-profile-details >
< gs-step mark-position ="start " > </ gs-step >
< gs-step target ="#nowPlaying " style ="z-index:100; top:602 " duration ="0.2 " > </ gs-step >
< gs-step target ="#playlist " style ="display:none; " position ="start " > </ gs-step >
< gs-step target ="#circle " style ="z-index:{{ $timeline('start').style['z-index'] }}; opacity:1; " duration ="0.01 " position ="start " > </ gs-step >
< gs-step target ="#status " style ="opacity:1 " duration ="0.8 " position ="start " > </ gs-step >
< gs-step target ="#artist " style ="opacity:1 " duration ="0.8 " position ="start " > </ gs-step >
< gs-step target ="#album " style ="bounds:{{ album.switchOver }} " duration ="0.33 " position ="start " > </ gs-step >
< gs-step target ="#circle " style ="scale:4; " duration ="0.3 " position ="start+=0.01 " > </ gs-step >
< gs-step target ="#circle " style ="scale:5;opacity:0.85 " duration ="0.1 " position ="start+=0.31 " > </ gs-step >
< gs-step target ="#circle " style ="delay:0.2; opacity:0 " duration ="0.4 " position ="start+=0.5 " > </ gs-step >
< gs-step target ="#playlist " style ="bounds:{{ album.switchOver }}; " position ="start+=0.33 " > </ gs-step >
< gs-step target ="#playlist " style ="display:block;className:''; " duration ="0.010 " position ="start+=0.33 " > </ gs-step >
< gs-step target ="#album " style ="opacity:0;display:none " duration ="0.010 " position ="start+=0.33 " > </ gs-step >
< gs-step target ="#playlist " style ="className:'shadow' " position ="start+=0.34 " > </ gs-step >
< gs-step target ="#playlist " style ="bounds:{{ album.to }} " duration ="0.5 " position ="start+=0.34 " > </ gs-step >
< gs-stage name ="after ">
....
</ gs-stage >
</ gs-stage >
</ gs-timeline >
< div grid-view state ="$animation.start "> </ div >
< div profile-view state ="$animation.zoom ">
< div state ="$animation.zoom.after "> </ div >
</ div > Reactions are currently unavailable
Implement gsStage as 0..n groupings with gsTimelines. Stages act as sequential chained phases of an animation; wrapped in optional resolvers that must resolve before the next stage will be started
beforeandafterresolvers.