ThomasBurleson / angularjs-gsTimelines

Creation of animation DSL to build sophisticated UX transitions using animation timelines.
http://codepen.io/ThomasBurleson/pen/ByKVGg
MIT License
48 stars 3 forks source link

Add support for gsStage with resolvers #2

Open ThomasBurleson opened 9 years ago

ThomasBurleson commented 9 years ago

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

<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>