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

Add support for gsStage with resolvers #2

Description

@ThomasBurleson

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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions