Repository files navigation

Create scroll-based animation without JavaScript.

Sometimes we want to update the CSS style of an HTML element based on the scroll position, just like fast-forwarding or rewinding a video by scrolling up and down.

With Trigger JS, get the desired value with CSS variable on page scroll for your animation needed, without writing a single line of JavaScript code, configuration with HTML attributes. Checkoutexamples here.

Read this document in other languages:English,繁體中文,简体中文.

1. Include Trigger JS to your webpage with a script tag, with either CDN:

   • UNPKG CDN:

   <scriptsrc="//unpkg.com/@triggerjs/trigger"defer></script>

   • jsDelivr CDN:

   <scriptsrc="//cdn.jsdelivr.net/npm/@triggerjs/trigger"defer></script>

2. Addtg-name to the DOM element that you want to monitor. The value oftg-name is the name of the CSS variable that binds to the element.

<divtg-name="scrolled"id="greeting">Hello, World</div>

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

<style>body {padding:100vh0;/* 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.

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 versionbundle.js located indist. Run a local web server and browse the greeting example inindex.html :
   1. For example, typenpx serve in the terminal
   2. Open uphttp://localhost:5000 in web browser.
   3. Scroll the page and see the result.
4. The following command will build a new version todist/bundle.js:
   • For development (with watch):

     npm run watch

   • For development:

     npm run build

   • For production:

     npm run prod

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

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

<h1id="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:100vh0;/* In order to make the page have enough rooms for scrolling */  }#heading {color:var(--color);  }</style>

Let's saytg-from="200" andtg-to="-200", we want to move the element in x position withtransform: translateX().tg-steps lets us define how many steps from200 to-200, for example,tg-steps="400" means run from200 to-200 with400 steps,1 per increment; In other words,tg-steps="800" means0.5 per increment.

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

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

<h1id="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:100vh0;/* In order to make the page have enough rooms for scrolling */  }#heading {color:var(--color);  }</style>

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

<h1id="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:100vh0;/* 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 is5, and becomes black for other values, We can change it to:

<h1id="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 toexact by adding an! at the end of the value oftg-filter:

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

Inexact mode,--color becomesblue when the value is5, and becomes the default when the value is not5.

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

Just like some CSS properties, the values oftg- attributes (excepttg-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 thetg- attribute without value. For example:

<divtg-name="scale"tg-from="0"tg-to="50"><spantg-name="color"tg-to><!-- The value of tg-to is now 1 (Default value) --></span></div>

The different betweencover (default) andedge:

So that iftg-edge="inset", the element must be higher than the viewport (window.clientHeight).

We can also listen to thetg event on an element with #"auto" data-snippet-clipboard-copy-content="<h1 id="heading" tg-name="color" tg-from="1" tg-to="3" tg-steps="2" tg-map="1:#000;2:#666;3:#ccc"> Trigger JS</h1><style> body { padding: 100vh 0; /* In order to make the page have enough room for scrolling */ } #heading { color: var(--color); }</style><script> document.querySelector('#heading').addEventListener('tg', (e) => { console.log(e.detail); // {value: '#666'} });</script>">

<h1id="heading"tg-name="color"tg-from="1"tg-to="3"tg-steps="2"tg-map="1:#000;2:#666;3:#ccc">  Trigger JS</h1><style>body {padding:100vh0;/* In order to make the page have enough room for scrolling */  }#heading {color:var(--color);  }</style><script>document.querySelector('#heading').addEventListener('tg',(e)=>{console.log(e.detail);// {value: '#666'}});</script>

Customising the Prefix

<bodydata-trigger-prefix="data-tg"><divdata-tg-name="scrolled"id="greeting">Hello, World</div></body>

Contribute

License