GLEIT

super easy interactive html animations.

with GLEIT you can easily do interactive animations based on page scroll, mouse movement, etc.

<script src="https://unpkg.com/gleit"></script>

or

npm i gleit

<script src="node_modules/gleit/dist/gleit.min.js"></script>

scroll down to see examples.

animate based on page scroll

this is the code for the orange circle:
> obviously run it in a page that scrolls beyond '100vh'

<div class="circle1"
  data-gleit='{
    "0vh": {"scale": 0, "opacity": 0},
    "10vh": {"opacity": 1},
    "100vh": {"scale": 1}
  }'></div>

<script>
  window.addEventListener('load', function() {
    gleit.animate().on(gleit.verticalScroll());
  });
</script>

<style>
  .circle1 {
    position: fixed; left: 50vw; top: 50vh;
    margin-left: -75vmax; margin-top: -75vmax;
    width: 150vmax; height: 150vmax;
    border-radius: 150vmax;
    background: #ffa726; z-index: -1000;
  }
</style>

animate based on mouse position

this is the code for the purple diamonds:
> obviously this only works on desktop

<div class="diamond" id="d1"></div>
<div class="diamond" id="d2"></div>
<div class="diamond" id="d3"></div>

<script>
  window.addEventListener('load', function() {
    gleit.animate(document.getElementsByClassName('diamond'),
        { '0vw': { translateX: '10vw', rotate: '45deg' },
          '100vw': { translateX: '-10vw' }})
      .on(gleit.mouseMove.client.x);

    gleit.animate(document.getElementsByClassName('diamond'),
        { '0vh': { translateY: '10vh' },
          '100vh': { translateY: '-10vh' }})
      .on(gleit.mouseMove.client.y);
  });
</script>

<style>
  .diamond {
    position: fixed; width: 10vmax; height: 10vmax;
    border: 5vmax solid #673ab7; z-index: -999; }
  .diamond#d1 { left: 10vw; top: 5vh; }
  .diamond#d2 { left: 20vw; bottom: 5vh; }
  .diamond#d3 { right: 5vw; top: 40vh; }
</style>

> looking for more examples?

checkout the SOURCE OF THIS PAGE , or read the README for more examples and more detailed documentation.