Create Scroll-Based Animations With HTML Attributes and CSS Variables

Trigger JS is Get the desired value with a CSS variable in page scrolling for your animation needs, without writing a single line of JavaScript code.

Sometimes we want to create an animation or update the CSS style of an HTML element based on the scroll position, just like playing a video forward and backward by scrolling up and down.

page scroll animation css codepen, move element on scroll javascript, css animations on scroll slide in from bottom, scroll animation codepen, scroll triggered animations

How to make use of it:

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

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

2. Specify the name of the CSS variable in the tg-name attribute.

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

3. Apply your animation to the element using the myVar variable.

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

4. Set 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. Specify the number of steps between the start/end values or directly specify the step size.

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

6. Setting edge mode. It can be “cover” (default) or “inside”.

<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%, or more.

<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. Play 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>

Scroll Position Based Animations In JavaScript, Trigger JS Plugin/Github, animate div on scroll jquery, trigger css animation on scroll without javascript