Author: | triggerjs |
---|---|
Views Total: | 546 views |
Official Page: | Go to website |
Last Update: | November 4, 2021 |
License: | MIT |
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