- From: fantasai via GitHub <sysbot+gh@w3.org>
- Date: Tue, 15 Feb 2022 23:23:58 +0000
- To: public-css-archive@w3.org
fantasai has just created a new issue for https://github.com/w3c/csswg-drafts: == [scroll-animations-1] Transition delays in scroll-linked animations == **Copying out @flackr's comment https://github.com/w3c/csswg-drafts/issues/6674#issuecomment-945845884** > > Here's a good example where animations a kinda-scroll-linked but not directly: https://codepen.io/isladjan/pen/abdyPBw > > @smfr For these use cases I propose properties similar to transition timing functions (transition-duration, transition-timing-function, transition-delay) which will specify a delay over which the scroll input will plug in to the timeline. > > E.g. for view-timeline: > ```css > view-timeline-transition-duration: <time> > view-timeline-transition-timing-function: <easing-function> > view-timeline-transition-delay: <time> > ``` > > Then for the above use case the developer would simply specify a `view-timeline-transition-duration: 2s` and the position of the animation time would smoothly move towards the scroll position over 2s. > > [...] > > The duration in my proposed property is the length of time it takes the scroll based timeline to catch up to scroll position changes. Here's an example hacked together with javascript using a custom property transition to represent the delayed transition value being plugged in to the timeline: > > https://jsbin.com/qekodug/edit?css,js,output Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7059 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 15 February 2022 23:24:00 UTC