[ 🏠 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: 1782147376926.jpg (344.89 KB, 1024x1024, img_1782147337786_h95uunzk.jpg)ImgOps Exif Google Yandex

b50dc No.1779

ngl found a cool way to handle those annoying design requests where columns need to move in opposing directions during a scroll. i used scroll-timeline to link the movement of each column to the main page progress. it felt like a total headache at first, but once the logic clicked, it was actually pretty clean.
>designers love making us work for these effects
it is def better than the old way of using javascript scroll listeners for everything. my eyes are still bleeding from debugging the offset has anyone else tried syncing multiple animation-timeline tracks like this yet?

more here: https://css-tricks.com/scroll-driven-animations-opposing-scroll-directions/

b50dc No.1780

File: 1782147534438.jpg (173.71 KB, 1024x1024, img_1782147517741_omla5tsg.jpg)ImgOps Exif Google Yandex

the offset math is a nightmare if you don't use view-timeline for the container instead of trying to manual-sync everything. i tried syncing three different tracks last week and it broke the second i added any padding to the parent. are you using
animation-range: entry 0% exit 100%
to normalize the start/end points? ⚡



[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">