Scroll Position Based Animations In JavaScript – Trigger.js

Preview:

Description:

A lightweight JavaScript AOS (Animate On Scroll) library that makes it easier to animate elements based on scroll position.

It is easy to use and you can apply any custom animations to elements using HTML attributes and CSS variables.

How to use it:

1. Download and import the Trigger.js into your project.

<script src="./dist/bundle.js" defer></script>

2. Define the CSS variable name in the tg-name attribute. Required.

<div
  class="container"
  tg-name="myVar"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

3. Apply your own animations to the element using the myVar variable.

.demo {
  filter: blur(calc(var(--myVar) * 1px));
}

4. Set the start/end values.

<div
  class="container"
  tg-name="myVar"
  tg-from="100"
  tg-to="0"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

5. Determine how many steps between start/end values or specify the step size directly.

<div
  class="container"
  tg-name="myVar"
  tg-steps="100"
  tg-step="5"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

6. Determine the edge mode. Can be either ‘cover’ (default) or ‘inset’.

<div
  class="container"
  tg-name="myVar"
  tg-edge="inset"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

7. Change the values based on the scroll position where 1 means 0% – 10%, 2 means 10% – 20 %, …

See the Pen
iPhone 13 Text Highlight on Scroll (with Trigger.js) by Steven Lei (@stevenlei)
on CodePen.

<div
  class="container"
  tg-name="myVar"
  tg-map="1,2,3,4,5,6,7,8,9,10: New Value"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

8. Trigger the animation only if you scroll the page to a specific position.

<div
  class="container"
  tg-name="myVar"
  tg-filter="2!"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

<div
  class="container"
  tg-name="myVar"
  tg-filter="6,7"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

9. Calculate the scroll position based on another element.

<div
  class="container"
  tg-name="myVar"
  tg-follow="container"
>
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

10. Customzie the bezier easing function: ease, easeIn, easeOut, easeInOut, or custom numbers.

<div class="container" 
  tg-name="myVar" 
  tg-follow="container" 
  tg-bezier="ease">
  <div class="demo">
    Element To Animate On Scroll
  </div>
</div>

Changelog:

v1.0.8 (11/04/2021)

• Added tg-bezier
• Added range support for tg-map