1 of 14

pointer-timeline

2 of 14

What?

  • Driving the progress of an animation based on the pointer’s position:
    • Relative to an element’s box
    • Relative to the viewport
  • Build on top of Scroll-Driven Animations (timelines, ranges)

3 of 14

In the Wild

  • Libraries:
    • Parallax.js
    • Tilt.js
    • Atropos.js
  • Sites:

4 of 14

Common features

  • Timeline’s attachment range is usually the box of:
    • Animation’s target
    • A parent container of the target
    • The whole viewport

5 of 14

Common features

  • Specified effect’s focal point
  • Effect progress is usually in form of:
    • [1 , 0, 1]
    • [-1, 0, 1]
    • [0 , 1, 0]
  • Effect’s focal point is relative to either the effect’s target or timeline’s subject

6 of 14

Common features

  • Delayed progress
  • Progress linked to velocity
  • Some effects rely on polar coordinates

7 of 14

Proposal

  • Everything is bikeshed-able
  • Some features are important for level 1
  • Some trickier - can be deferred

8 of 14

Proposal: New timeline

  • Add a new property for setting a timeline:
    • pointer-timeline: <name> <axis>
  • Works the same as view-timeline
  • Add a new anonymous functional notation:
    • pointer(<axis> <source>)
    • Source: self | nearest | root

9 of 14

Proposal: New range names

  • Some existing range names don’t make sense:
    • entry, exit, *-crossing
  • Keep existing ones that work:
    • cover, contain
  • Add new names:
    • fill and fit

10 of 14

Proposal: New range names

  • By default all range names have no effect
  • Effect happens when range-center is shifted

11 of 14

Proposal: New range - center

  • Add a new range property: range-center
  • Allows setting the effect’s focal-point
  • Can take <length-percentage> or a keyword: center | start | end
  • Can take an extra keyword: normal | target for centering on the animation’s target

12 of 14

Demo

  • Illustrations of timeline and ranges
  • Timeline & ranges demo (requires Anchor Positioning)

13 of 14

Proposal: CSS

  • pointer-timeline: <name> <axis>
  • pointer(<axis> <source>)
  • animation-range-center: target? <length> | keyword
  • Or: animation-range: <start> <end> at <center>

14 of 14

Proposal: Web Animations

  • PointerTimeline({ source, axis })
  • animation.rangeCenter