This repository was archived by the owner on Nov 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
This repository was archived by the owner on Nov 26, 2022. It is now read-only.
Add support for gsStage with resolvers #2
Copy link
Copy link
Open
Labels
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
beforeandafterresolvers.
<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