<html>
<head>
  <title>Animations example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.css" />
</head>
<body>
  <p>Scroll down ↓</p>
  <div class="content">
  
    <div id="example1Trigger" class="example1-trigger"></div>
    <div class="example1" data-animate='
      {
        "triggerId": "example1Trigger", 
        "start": "200px",
        "end": "0px",
        "functionName": "example1",
        "class": "active",
        "classRemove": true
      }
    '>
      Turns clockwise
      <div>Progress: <span id="jsExample1Progress">0</span></div>
    </div>

    <div id="example2Trigger" class="example2-trigger"></div>
    <div class="example2" data-animate='
      {
        "triggerId": "example2Trigger",
        "start": "350px",
        "end": "100px",
        "functionName": "example2",
        "class": "active",
        "classRemove": true
      }
    '>
      Rurns counterclockwise
      <div>Progress: <span id="jsExample2Progress">0</span></div>
    </div>
    
    <div class="example3" data-animate='
      {
        "start": "300px",
        "end": "100px",
        "functionName": "example3",
        "class": "active",
        "classRemove": true
      }
    '>
      Zoom in
      <div>Progress: <span id="jsExample3Progress">0</span></div>
    </div>
    
    <div class="example4" data-animate='
      {
        "start": "200px",
        "end": "0px",
        "functionName": "example4",
        "class": "active",
        "classRemove": false
      }
    '>↓</div>
    
    <div id="example5" class="example5" data-animate='
      {
        "triggerId": "example5Trigger",
        "start": "300px",
        "end": "0px",
        "functionName": "example5",
        "class": "active",
        "classRemove": true
      }
    '>👍🏻</div>
    <div id="example5Trigger" class="example5-trigger"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.js"></script>
  <script>auto.init()</script>
</body>
</html>
.content {
  height: 2000px;
  padding: 10px;
}

p {
  padding: 10px;
  color: #aaa;
  border-bottom: solid 1px #eee;
}

.example1 {
  position: absolute;
  top: 250px;
  width: 240px;
  height: 100px;
  padding: 10px;
  background: #ddd;
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  transition: all 0.2s ease-out;
}
.example1.active {
  background: #0a0;
}
.example1-trigger {
  position: absolute;
  top: 250px;
  left: 0;
  width: 6px;
  height: 4px;
  background: red
}

.example2 {
  position: absolute;
  top: 400px;
  left: 300px;
  width: 240px;
  height: 100px;
  padding: 10px;
  background: #ddd;
  border-radius: 8px;
  color: #fff;
  transition: all 0.2s ease-out;
}
.example2.active {
  background: #0a0;
}
.example2-trigger {
  position: absolute;
  top: 400px;
  left: 0;
  width: 6px;
  height: 4px;
  background: red
}

.example3 {
  position: absolute;
  top: 600px;
  left: 140px;
  width: 240px;
  height: 100px;
  padding: 10px;
  background: #ddd;
  border-radius: 8px;
  color: #fff;
/*   transition: all 0.4s ease-out; */
}
.example3.active {
  background: #0a0;
}

.example4 {
  position: absolute;
  top: 800px;
  left: 180px;
  font-size: 10rem;
  color: #eee;
  transition: all 1s ease-out;
}
.example4.active {
  color: #000;
}

.example5 {
  position: fixed;
  top: 40px;
  left: 200px;
  font-size: 5rem;
  transform: scale(0);
  transition: all 1s ease-out;
}
.example5-trigger {
  position: absolute;
  top: 1100px; 
  height: 1px;
  opacity: 0;
}

let example1Progress = document.querySelector("#jsExample1Progress");
let example2Progress = document.querySelector("#jsExample2Progress");
let example3Progress = document.querySelector("#jsExample3Progress");
let example5Element = document.querySelector("#example5");

function example1(params) {
  example1Progress.innerHTML = params.progress;
  let rotate = params.progress * 180;
  params.element.style.transform = "rotate(" + rotate +  "deg)";
}

function example2(params) {
  example2Progress.innerHTML = params.progress;
  let rotate = params.progress * -360;
  params.element.style.transform = "rotate(" + rotate + "deg)";
}

function example3(params) {
  example3Progress.innerHTML = params.progress;
  let scale = 1 + params.progress * 1;
  params.trigger.style.transform = "scale(" + scale + ")";
}

function example5(params) {
  let scale = params.progress * 1;
  params.element.style.transform = "scale(" + scale + ")";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.