Design inspiration curated from X

i wasn't aware of `animation-timeline` css property if I be honest.... - Soren

Published by Soren on October 25, 2025.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s siz...

Design notes

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

This entry is part of MotionVault's curated archive of interface, product, brand, website, and motion design references from public creators on X.

Image rights and licensing remain with Soren; use the original X post for source and licensing inquiries.

Deep Clone · React 19 + Framer Motion

Interactive Sandbox & Production Code

Reverse-engineered 1:1 component with spring physics, accessible keyboard controls, and modular Tailwind CSS.

Live Sandbox Public View Code PRO View Prompt PRO
https://northlight.design/sandbox/1982192826956849243
Launch Sandbox ↗
Production React 19 TypeScript + Framer Motion source component
🔒 Unlock Source Code ($19/mo)

Reference details

Creator
Soren
X handle
@sorenblank
Published
October 25, 2025
Media
1 visual reference
Views
122,040
Likes
1,485
Bookmarks
1,589

Related tags