Skip to content

Instantly share code, notes, and snippets.

@bramus

bramus/animation-timelines.md

Last active July 20, 2023 21:04
Show Gist options
  • Save bramus/512cad694ad94cde1ba54c9864372698 to your computer and use it in GitHub Desktop.
Save bramus/512cad694ad94cde1ba54c9864372698 to your computer and use it in GitHub Desktop.
Download ZIP
Animation Timelines
Raw
animation-timelines.md

With Scroll-Driven Animations 1 we have defined some new types of timelines which authors can use to run an animation on. Besides the existing DocumentTimeline, authors can now use a ScrollTimeline to animate based on a scroller’s scroll offset or ViewTimeline to animate as an element crosses its scrollport.

I’ve added this topic to get more ideas around new potential timelines. For example, one type of timeline we at Google discussed was a MediaPlaybackTimeline, where you could sync up animations to a media element – <audio> or <video> – play position.

video {
  timeline: --video;
}

.animated {
  animation: slide linear forwards;
  animation-timeline: --video;
  animation-range: 1s 5s;
}

Would be great if we could gather more ideas around this timeline and other potential timelines. Maybe a HoverTimeline? A TimeOfTheDayTimeline? WhateverTimeline?

Footnotes

  1. https://drafts.csswg.org/scroll-animations-1/ ↩

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment