Some History
Back in the days when it seemed as if one in five websites was built entirely in Flash, I would use Flash to animate poems I wrote. Inge Raadschelders and I did this together and we called ourselves Blindschelders & Raadsman. When Flash died we gradually stopped making them because there wasn’t an immediately obvious successor to Flash.
In 2012 I tried to recreate one of the animated poems in HTML and CSS, was rather pleased with the effect but also immediately lost interest. Most browsers did not support CSS animations, so they weren’t fun to share, and I was comfortable with CSS but Inge wasn’t. We both made little poetry movies by ourselves but the collaboration was a fruitful one and if we couldn’t do it together, it just wasn’t as much fun. We started making other things instead.
The Plan
Yesterday, I had the thought that it might be nice to make some animated poems that are triggered by scrolling. This would mean the speed is dictated by the person reading the poem, just like with a book, and not by me, when I make them into little movies. The idea made me very happy and I was thinking about it last night and suddenly remembered that one attempt I’d made. This one isn’t triggered by scrolling and I might make it into a CodePen someday soon but I was glad to see it today.
Here is the little animated poem from 2012: blindschelders.nl/mobile/sneeuwkerk It’s far from perfect, it’s very simple, it’s pretty cross-browser compatible these days and works on desktop, laptop and phone. So much has happened in the last 7 years that scroll-triggered animation seems an obvious choice and perhaps a format that I would enjoy.
The Resources
Now I have to figure out the best way to go about it. I looked at some libraries. The first one I thought of was GreenSock. I used to use them with Flash but they do a lot more than that and I’m tempted. As I searched I came across a few more that caught my attention. Here is a little list, the notes included are for me. I haven’t tested any of them yet.
- GreenSock
Does TweenLite do enough of what I want? Am I willing to pay for the full version? Which I think you need if you want to use cssanimation.io… but do I? - ScrollMagic
Seems really big to me. Many possibilities but in all their examples the scrolling feels like schlepping something through mud. - Animate On Scroll (AOS)
Seems pretty good, lightweight and versatile. I don’t know. Maybe. - CSS3 Animate it
Hm. - anime.js
This seems interesting. Especially if you look at the text effects. Not sure about the learning curve but might be worth it. - Velocity
Might make ScrollMagic work better. It speeds up jQuery animation and is in fact a replacement of it. - Transit
Apparently Velocity is faster under stress, which might be relevant. - Animista
Oh! I love this. Pre-made CSS animations, copy only the ones you want. - Intersection Observer
Nice tutorial on how to use JavaScript to check whether an element has been scrolled into view at which point you can use CSS animations. I like this a lot. - jQuery to detect scroll
Tutorial on how to use jQuery to detect whether an element has been scrolled into view. I’d rather not load jQuery if there is no need. - A Beginner’s guide to scrollytelling
I think scrollytelling is an ugly name but the second half of that guide has a lot of good resources per subject. Even the list of subjects alone is informative just to see the different elements that you can play with. - TypeLighter.js
This looks interesting. Letting words appear letter by letter. - AniX
Animation library, js, fast, versatile. Maybe. - Typical
Typing and deleting of words, js, very light but on codepen it didn’t work right away and I’m not sure why. - ScrollTrigger
Not sure about this one as it seems to just toggle a class visible/invisible, js. - CSS Motion Path
Pure CSS
The Project
I would try to recreate this one, below. I’m sure redoing it will change the little animated poem, because redoing anything always changes things, because of the difference in technology and for the obvious: I want it to be triggered by scrolling.
Edit: I came across something called Scrollama, a lightweight JavaScript library for storytelling. I tried it out in Opera and didn’t find it as reliable as I had hoped but it’s sympathetic and it also has some more suggestions for alternatives.
Edit 2: Added A Beginner’s Guide to Scrollytelling and TypeLighter.
Edit 3: Added AniX.