<div tg-name="scrolled" id="greeting">Hello, Worlddiv>

In the above example, CSS variable --scrolled is added to the selector #greeting:

<style>
  body {
    padding: 100vh 0; /* In order to make the page have enough room for scrolling */
  }

  #greeting {
    transform: translateX(
      calc(var(--scrolled) * 1px)
    ); /* Converts to px unit */
  }
style>

3. Scroll the page and see the result.

Method 2: Build from source

1. Get the library in either way:
   • From GitHub

   git clone https://github.com/triggerjs/trigger.git

   • From NPM

   npm i @triggerjs/trigger

2. Change to the directory, install the dependencies:

   npm install

3. There is a pre-built version bundle.js located in dist. Run a local web server and browse the greeting example in index.html :
   1. For example, type npx serve in the terminal
   2. Open up http://localhost:5000 in web browser.
   3. Scroll the page and see the result.
4. The following command will build a new version to dist/bundle.js:
   • For development (with watch):

     npm run watch

   • For development:

     npm run build

   • For production:

     npm run prod

The tg- Attributes

Value Mapping

Number is not suitable for all the situations. For example, we want to update the text color based on the scroll value. the attribute tg-map can help.

The following example shows how to update the text color with the rules below:

<h1
  id="heading"
  tg-name="color"
  tg-from="1"
  tg-to="10"
  tg-steps="9"
  tg-map="1: black; 2: red; 3: orange; 4: yellow; 5: green; 6: cyan; 7: blue; 8: purple; 9,10: grey"
>
  Rainbow Text
h1>

<style>
  body {
    padding: 100vh 0; /* In order to make the page have enough rooms for scrolling */
  }

  #heading {
    color: var(--color);
  }
style>

Steps & Step

Let's say tg-from="200" and tg-to="-200", we want to move the element in x position with transform: translateX(). tg-steps lets us define how many steps from 200 to -200, for example, tg-steps="400" means run from 200 to -200 with 400 steps, 1 per increment; In other words, tg-steps="800" means 0.5 per increment.

But sometimes, we do not want to do the math by ourselves, that's why tg-step exists. tg-step defines the exact value of increment. Please note that if tg-step is defined, tg-steps will be ignored.

Noise Reduction

Sometimes we are only interested in certain values. For example, we only want to know when 25, 50, 75 show up from 0 to 100 (tg-from="0" and tg-to="100"). In this situation, tg-filter helps you.

<h1
  id="heading"
  tg-name="color"
  tg-from="0"
  tg-to="100"
  tg-step="1"
  tg-filter="25,50,75"
  tg-map="25: red; 50: yellow; 75: green"
>
  Red (25), Yellow (50), Green (75)
h1>

<style>
  body {
    padding: 100vh 0; /* In order to make the page have enough rooms for scrolling */
  }

  #heading {
    color: var(--color);
  }
style>

The mode of tg-filter

There are two modes for tg-filter, retain by default, the other one is exact. Here is an example to clarify this:

<h1
  id="heading"
  tg-name="color"
  tg-from="0"
  tg-to="10"
  tg-step="1"
  tg-filter="5"
  tg-map="5: blue"
>
  Trigger.js
h1>

<style>
  body {
    padding: 100vh 0; /* In order to make the page have enough rooms for scrolling */
  }

  #heading {
    --color: black;
    color: var(--color);
  }
style>

In the above example, the text has an initial color of black, and it will turn to blue when it arrives at the middle of the page and never turn to black again because there is no trigger point of the black color.

So let's say we want the text color becomes blue only when the calculation value is 5, and becomes black for other values, We can change it to:

<h1
  id="heading"
  tg-name="color"
  tg-from="0"
  tg-to="10"
  tg-step="1"
  tg-filter="4,5,6"
  tg-map="4: black; 5: blue; 6: black"
>
  Trigger.js
h1>

It works, but the code becomes redundant. To solve this, we can switch the filter mode to exact by adding an ! at the end of the value of tg-filter:

<h1
  id="heading"
  tg-name="color"
  tg-from="0"
  tg-to="10"
  tg-step="1"
  tg-filter="5!"
  tg-map="5: blue"
>
  Trigger.js
h1>

In exact mode, --color becomes blue when the value is 5, and becomes the default when the value is not 5.

The design of adding ! to the value of tg-filter is the demand is exclusive to the attribute. Establishing another attribute for the mode is unnecessary or even leads to the misunderstanding.

Value Inheritance

Just like some CSS properties, the values of tg- attributes (except tg-follow, tg-ref) inherits from the parents if not being set in the current element. If we do not want it inherits from parent and set it as default value, just add the tg- attribute without value. For example:

<div tg-name="scale" tg-from="0" tg-to="50">
  <span tg-name="color" tg-to>
    
  span>
div>