Skip to content
This repository has been archived by the owner on Nov 26, 2022. It is now read-only.

Add support for gsStage with resolvers #2

Open
ThomasBurleson opened this issue Jan 16, 2015 · 0 comments
Open

Add support for gsStage with resolvers #2

ThomasBurleson opened this issue Jan 16, 2015 · 0 comments
Assignees

Comments

@ThomasBurleson
Copy link
Owner

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>
@ThomasBurleson ThomasBurleson changed the title Add support for stages with resolvers Add support for gsSstage with resolvers Jan 16, 2015
@ThomasBurleson ThomasBurleson changed the title Add support for gsSstage with resolvers Add support for gsStage with resolvers Jan 16, 2015
@ThomasBurleson ThomasBurleson self-assigned this Jan 16, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

1 participant