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

Original style: no transform

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

400*600

Original style: transform: scale(0.5, 0.5)

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

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

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

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

400*600

data-at-original-style='{"transform":"scale(0.5, 0.5)"}'

data-at-new-style='{"transform":"scale(2, 2)"}'

data-at-original-style='{"transform":"rotate(0deg)"}'

data-at-new-style='{"transform":"rotate(45deg)"}'