Voor CSS Day 2025 wilde ik graag iets maken wat én visueel interesse wekt, én technisch vet is. Ik ben uiteindelijk uitgekomen bij scroll-driven animations, een relatief nieuwe feature in CSS waar je supervette dingen mee kunt doen. Geen JavaScript nodig! Ik wilde dit al veel langer gebruiken in de opleiding, en heb dat ook één keer gedaan, maar was toen niet tevreden met het resultaat.
"Het is magisch hoeveel je kunt bereiken met alleen CSS."
Tijdens mijn voorbereiding voor CSS Day heb ik mij verdiept in scroll-driven animations. Dat zijn animaties die je triggert op basis van hoe ver iemand gescrolld heeft. Super vet voor storytelling! En het mooiste: je hebt er geen JavaScript voor nodig, alleen CSS. Het is nog redelijk nieuw, maar wordt al goed ondersteund in moderne browsers zoals Chrome en Safari (achter een flag).
In mijn project heb ik een soort mini-experience gemaakt waarin je tijdens het scrollen door het refrein van Moral Panic, een van mijn favoriete albums van Nothing but Thieves. Ik heb onder andere gebruikgemaakt van de @scroll-timeline en properties zoals animation-timeline en scroll-timeline-name.
"Ik wilde een verhaal vertellen dat zich afspeelt tijdens het scrollen — letterlijk."
Ik vond het vooral leuk dat ik helemaal geen JavaScript nodig had om een dynamisch gevoel te geven, want ik haat JavaScript. Nee geintje. Maar CSS vind ik leuker. Veel leuker.