super easy interactive html animations.

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

<script src=""></script>


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"
    "0vh": {"scale": 0, "opacity": 0},
    "10vh": {"opacity": 1},
    "100vh": {"scale": 1}

  window.addEventListener('load', function() {

  .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;

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>

  window.addEventListener('load', function() {
        { '0vw': { translateX: '10vw', rotate: '45deg' },
          '100vw': { translateX: '-10vw' }})

        { '0vh': { translateY: '10vh' },
          '100vh': { translateY: '-10vh' }})

  .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; }

> looking for more examples?

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