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.
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.
Latest comments (0)