JavaScript Scroll Trigger Style - Apply CSS on Visible Scroll - Apply CSS While Scrolling Progressively

A small JavaScript library that applies CSS to elements when they become visible on the viewport during scrolling and applies Transform CSS to elements while scrolling progressively. Uses Pure or Vanilla JavaScript with IntersectionObserver and with window event listener scroll. Call the function AtScrollTriggerStyle('selector') to apply any CSS on visible scroll and AtScrollProgressiveStyle('selector') to apply transform CSS on scroll progressively.

Created for me but feel free to use


Apply CSS on Visible Scroll


Translate 2D:

Original style: no transform
data-at-new-style='{"transform":"translate(200px,10px);"}'

400*600

Scale 2D:

Original style: transform: scale(0.5, 0.5)
data-at-new-style='{"transform":"scale(1, 1)"}'
Rotate demo 1

Support all styles:

Original style: background-color: yellow; width: 300px; height: 300px;
data-at-new-style='{"background-color":"green","width":"500px","height":"200px"}'

Original: 300*300 New: 500*200

Apply CSS on Visible Scroll


Translate 2D:

data-at-original-style='{"transform":"translate(-100px,0px)"}'
data-at-new-style='{"transform":"translate(200px,10px);"}'

400*600

Scale 2D:

data-at-original-style='{"transform":"scale(0.5, 0.5)"}'
data-at-new-style='{"transform":"scale(2, 2)"}'
Rotate demo 1

Rotate 2D:

data-at-original-style='{"transform":"rotate(0deg)"}'
data-at-new-style='{"transform":"rotate(45deg)"}'
progressive scroll demo rotate