paralaxer

Paralaxer

Introduction

A react component that will animate its nested children based on scroll position. Each child that will be animated will take an animation object containing either a to and from style object, or multiple steps from 0 - 100. The Paralaxer Wrapper takes 2 / 4 arguments start and end, which are absolute values related to the document. or tresholdStart and tresholdEnd which are relative to the Paralaxer wrappers distance from the top of the screen.

Sample at https://paralaxer.fengel.com/

Code Samples

<Paralaxer start={0} end={this.state.docHeight / 1.5}>
  <h1 
  style={{ transformOrigin: 'center'}}
  animation={{
    from:{ transform: 'rotate(360deg) skew(0deg) scale(1)'}, 
    to:{ transform: 'rotate(0deg) skew(0deg) scale(1)'},
  }}>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-200vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >P</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-150vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >a</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-100vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >r</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(-70vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >a</span>
    <span 
    animation={{
      0:{ opacity: 1},
      50:{ opacity: 0.5}, 
      100:{ opacity: 1},
    }}
      >l</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(70vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >a</span>
    <span 
      animation={{
      0:{ transform: 'translateY(0vh)'},
      50:{ transform: 'translateY(100vh)'}, 
      100:{ transform: 'translateY(0vh)'},
    }}
      >x</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(150vh)'},
        100:{ transform: 'translateY(0vh)'},
      }}
      >e</span>
    <span 
      animation={{
        0:{ transform: 'translateY(0vh)'},
        50:{ transform: 'translateY(200vh)'}, 
        100:{ transform: 'translateY(0vh)'},
      }}
      >r</span>
  </h1>
</Paralaxer>

Installation

yarn add or npm install 'paralaxer'