Poem Dissolve Animation Example

Introduction

This is an interactive component that animates a poem fading out piece by piece. It was requested by Kayla Kamibayashi for her graduation thesis, where she intended to create a dissolving experience and allow users to rediscover the lost content.

This widget is built with Vue.js and Animate.css.

Setup

Please include Vue.js and Animate.css in your project. Please also include vue-dissolve.css and vue-dissolve.js as two dependent files, where the vue-dissolve.js specifies the main application as well as the v-reveal component.

Usage

You may use the following example application as a start.

                
<div id="app">
  <a :class="{hidden : !isReset}" @click="reset(false)" href="#">Dissolve Again</a>

  <v-reveal delay="delay-1s" :is-reset="isReset" @reset="reset">
    <p>
      Let holy horror blanch each cheek, <br />
      Pale every brow with fears; <br />
      And rocks and stones, if ye could speak, <br />
      Ye well might melt to tears! 
    </p>
  </v-reveal>

  <v-reveal delay="delay-2s" :is-reset="isReset" @reset="reset">
    <p>
      Let sorrow breathe in every tone, <br />
      In every strain ye raise; <br />
      Insult not God’s majestic throne <br />
      With th’ mockery of praise. 
    </p>
    <p>
      A “reverend” man, whose light should be <br />
      The guide of age and youth, <br />
      Brings to the shrine of Slavery <br />
      The sacrifice of truth! 
    </p>
  </v-reveal>

  <p>
    <v-reveal delay="delay-3s" :is-reset="isReset" @reset="reset" :is-inline="true">
      To give
    </v-reveal>
    <v-reveal delay="delay-4s" :is-reset="isReset" @reset="reset" :is-inline="true">
      your God
    </v-reveal>
    <v-reveal delay="delay-5s" :is-reset="isReset" @reset="reset" :is-inline="true">
      the lie.
    </v-reveal>
  </p>
</div>
                
              

The id="app" is the main Vue applicaiton and the <v-reveal></v-reveal> is each instance of an animated component.

In <v-reveal></v-reveal>, delay="delay-1s" can be customized based on the documentaiton of Animate.css. In other words, by default, there are options of delay-1s, delay-2s, and delay-3s that can be used.

The content inside <v-reveal></v-reveal> is not limited to just <p></p> elements. In other words, all valid HTML tags can be used inside (i.e. a Vue slot).

If you are constructing <v-reveal></v-reveal> for an inline element, you may add :is-inline="true" attribute to the <v-reveal></v-reveal> component. Internally it adds a CSS rule, display: inline-block, to modify a previously block element.

Note that you may also customize the text used in the Dissolve Again button.