I am wondering if there is a way to achieve this effect when scrolling using just CSS?
I really like the way the hat scrolls out of view and then each letter changes it’s size. I guess I can do the letter sizing with keyframes, but not sure how I do it when the page scrolls for each letter.
The animation can be done in CSS but you would have to have js trigger and interact with the animation based on how far the page has scrolled. It can’t be done in CSS alone unless you just wanted it as a stand alone animation not based on scroll.
Here’s a simple demo where I borrowed most of the js from CSS Tricks just to test.
Obviously the more animation you add the more complex it gets so if you want all the bells and whistles then you are better off with the ready made plugin you found (or similar ones).
I’m not sure if there is a specific name for it but I usually refer to it as scroll animations.
There are many others around that do all sorts of animations like this one.
Or for full blown work something like this perhaps.
It all depends on what you want to accomplish. If it’s just a ‘one off’ little animation then write it yourself but of its a series of complex animation then one of those tools would be helpful but of course there are steep learning curves,