🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes.
Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please refer to https://developer.chrome.com/articles/scroll-driven-animations/ for an article with examples that use the updated syntax.
I just finished giving a lightning talk at the wonderful CSS Conf Colombia covering Scroll-Linked Animations with CSS @scroll-timeline. Really enjoyed giving a talk again after all this time, especially with this great vibe they have going on and the afterparty in gather.town (skribbl FTW!).
~
# Slides
You can find the slides embedded below:
~
# Source Materials & Demos
Source materials for the slides are my two posts on Scroll-Linked Animations:
- Part 1: Intro + Basic Scroll-Linked Animations
- Part 2: Scroll-Linked Animations with Element-Based Offsets
All shown demos and visualizations can be found on CodePen, and are gathered in these collections:
- Scroll-Linked Animation Demos: Visualizations
- Scroll-Linked Animation Demos: Part 1
- Scroll-Linked Animation Demos: Part 2
~
# Video
I managed to clip my talk from the livestream, and have embedded it below:
~
# In-Closing
Thanks to the organisers for having me, and thanks to the attendees for watching me speak. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂
💁♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.
~
🔥 Like what you see? Want to stay in the loop? Here's how: