DEV Community

iDev-Games
iDev-Games

Posted on

Trig.JS - The easy way to create CSS animations that react to the element's position on screen.

Hi all,

You know these fancy animations Apple made a few years ago that moves as you scroll down and then as you scroll back up again? No? Well they look pretty cool.

I looked into this and maybe I wasn't looking in the right places but all I could find was frameworks that require JS to be wrote to achieve.

I had a think and wondered if CSS variables could actually make this a simple effect to achieve. My idea worked and actually turned out to be incredibly simple and lightweight but highly effective!

You can check it out in the documentation here:
https://idev-games.github.io/Trig-JS/

Github: https://github.com/iDev-Games/Trig-JS
NPM: https://www.npmjs.com/package/trig-js

Top comments (0)