Animate Sticky Elements On Page Scroll – StickyMate

Preview:

Description:

StickyMate is a standalone JavaScript library that makes uses of CSS/CSS3 animations to animate any elements when scrolling the web page.

It also provides a sticky functionality that allows you to make any element sticky when animating into the viewport.

Ideal for one page scroll website, single page landing app, presentation page, etc.

How to use it:

1. Just load the StickyMate library into the document and we’re ready to go.

<script src="stickymate.js"></script>

2. Define the CSS animations for each element using the data-anim attribute. All supported CSS animations (properties):

• opacity
• transform

<div data-anim='{"opacity": {"50vh":"1", "75vh":"0"}, "transform": {"25vh":"scale(1)", "100vh":"scale(.75)"}}'>
  <p>Animate Me</p>
</div>

3. To make an element sticky, add the data-sticky attribute to the element and define the start/end position.

<div class="wait-a-minute" data-sticky='{"start":"0", "end":"415vh"}'>
  <div class="frame">
    <div class="move-your-body" data-anim='{"opacity": {"0":"0", "100vh":"1"}, "transform": {"125vh":"scale(1) translate(0, 0)", "175vh":"scale(.75) translate(0, 0)", "275vh":"scale(.75) translate(-125%, 0)"}}'>
      <p>I Am Sticky</p>
    </div>
    <div class="move-your-body" data-anim='{"opacity": {"315vh":"1", "415vh":"0"}, "transform": {"163vh":"scale(.75) translate(125%, 0)", "263vh":"scale(.75) translate(0, 0)", "313vh":"scale(1) translate(0, 0)"}}'>
      <p>Until You Scrolled To The Next Element</p>
    </div>
  </div>
</div>