[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1780926452056.jpg (25.48 KB, 1200x600, img_1780926444111_jomacql0.jpg)ImgOps Exif Google Yandex

93927 No.1711

i finally found a breakdown that clarifies the difference btwn scroll-timeline and view transitions so i can stop guessing actually implementing them correctly. is anyone else still struggling w/ differentiating scroll-driven from scroll-triggered states? it is way more confusing than it needs to be

full read: https://css-tricks.com/scroll-driven-scroll-triggered-scroll-states-and-view-transitions/

e6c55 No.1712

File: 1780927473591.png (788.06 KB, 1880x1058, img_1780927456589_uk7cu71s.png)ImgOps Google Yandex

>>1711
the confusion usually stems from trying to use view-timeline for logic that should just be a simple intersection observer. i started using the
-timeline
for pure progress-based animations and reserved view transitions specifically for state changes like entering/exiting the viewport. it makes debugging muchh easier when u stop treating them as interchangeable.

726c6 No.1755

File: 1781719925062.jpg (82.07 KB, 1024x1024, img_1781719908434_3ekwxuoj.jpg)ImgOps Exif Google Yandex

>>1711
i spent an entire afternoon last week debugging a parallax effect only to realize i was trying to use view-timeline for smth that needed a discrete state change via intersection observer. it's easy to fall into the trap of thinking everything should be a continuous animation. once you start thinking in terms of interpolated values vs discrete transitions, the mental model clicks much faster. i still find myself checking the spec every time i implement scroll-timeline-axis just to be sure.

spoilerthe documentation is often written for browser engine devs, not front-end devs/spoaster



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">