Sandbox: JavaScript

Simplifies construction of CSS-transition based flows.

A parent element (that has the FrameFlow Behavior) should include elements with frame definitions and optional controls. An example frame definition:

<div class="frame3" data-frameflow-frame="{
    'activeState': {
      '#frame1 ! .frame-container': {
        'classes': [
          'disappear'
        ],
      }
    },
    'exitState': {
      '.frame3': {
        'classes': [
          'move-3-to-the-bottom'
        ]
      }
    }
  }"></div>

Controls can be defined within the html like so:

<button data-frameflow-previous>Prev</button>
<button data-frameflow-next>Next</button>

Next moves to the next Frame (as defined by DOM order) and previous returns to the last active frame. So if you skip from frame 1 to frame 3, clicking a 'previous' control will take you back to frame 1.

Additionally, a control can specify a target, such that it always goes to a specific frame.

<button data-frameflow-target=".frame3">Frame 3</button>

Example

<div data-behavior="FrameFlow">
  <div class="frame-container">
    <div id="frame1" data-frameflow-frame="{
      'activeState': {
        '#frame1': {
          'classes': [
            'active'
          ],
        },
        '.header-bar': {
          'classes': [
            'bottom-to-top'
          ]
        }
      },
      'exitState': {
        '#frame1': {
          'classes': [
            'scroll-up'
          ]
        },
        '#frame2': {
          'classes': [
            'scroll-up'
          ]
        }
      }
    }">

    </div>


    <div id="frame2" data-frameflow-frame="{
      'activeState': {
        '#frame2': {
          'classes': [
            'active'
          ],
        },
        '.header-bar': {
          'classes': [
            'first-class',
            'second-class'
          ]
        }
      },
      'exitState': {
        '#frame2 ! .frame-container': {
          'classes': [
            'move-off-screen-to-left'
          ]
        }
      }
    }">

    </div>

  </div>
  <div class="frame3" data-frameflow-frame="{
    'activeState': {
      '#frame1 ! .frame-container': {
        'classes': [
          'disappear'
        ],
      }
    },
    'exitState': {
      '.frame3': {
        'classes': [
          'move-3-to-the-bottom'
        ]
      }
    }
  }">

  </div>


  <div class="header-bar"></div>
  <div style="margin-top: 100px;">
    <button data-frameflow-previous>Prev</button>
    <button data-frameflow-next>Next</button>
    <button data-frameflow-target=".frame3">Frame 3</button>
  </div>
</div>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
startIndex Number 0 The starting position of the flow.