timeline-trigger-source CSS Property

The timeline-trigger-source property selects the timeline the trigger is based on — mirroring animation-timeline. Accepts auto, none, scroll(), view(), or a declared timeline name.

.reveal { timeline-trigger-source: view(); }

.pinned { timeline-trigger-source: scroll(root block); }

autoDefault. The element's implicit timeline.

noneNo source — no trigger is defined.

scroll()Scroll-driven timeline of a scroll container.

view()Timeline based on the element's viewport intersection (entry/exit/cover).

CSS Animation Triggers Module Level 1

Editor's Draft

W3C

Scroll slowly — two different sources:

source: view() — by visibility

source: scroll() — by position

Show all code

Edit CSS online

The plugin that remembers hundreds of CSS items for you

Every CSS property — in a live demonstration

The bilingual CSS reference

previous next