<?xml version="1.0" encoding="UTF-8"?>
<feature id="scroll-driven-animations"><name>Scroll-driven animations</name><description>The animation-timeline, scroll-timeline, and view-timeline CSS properties advance animations based on the user&#39;s scroll position.</description><group>scrolling</group><group_name>Scrolling</group_name><baseline><status>limited</status></baseline><support><browser name="chrome" version="115" supported="true"></browser><browser name="firefox" version="—" supported="false"></browser><browser name="safari" version="26" supported="true"></browser><browser name="edge" version="115" supported="true"></browser><browser name="chrome_android" version="115" supported="true"></browser><browser name="firefox_android" version="—" supported="false"></browser><browser name="safari_ios" version="26" supported="true"></browser></support><specifications><spec>https://drafts.csswg.org/scroll-animations-1/</spec></specifications><caniuse></caniuse><mdn_url>https://developer.mozilla.org/docs/Web/API/ViewTimeline</mdn_url><compat_features><key>api.ScrollTimeline</key><key>api.ScrollTimeline.ScrollTimeline</key><key>api.ScrollTimeline.axis</key><key>api.ScrollTimeline.source</key><key>api.ViewTimeline</key><key>api.ViewTimeline.ViewTimeline</key><key>api.ViewTimeline.endOffset</key><key>api.ViewTimeline.startOffset</key><key>api.ViewTimeline.subject</key><key>css.properties.animation-range</key><key>css.properties.animation-range-end</key><key>css.properties.animation-range-end.normal</key><key>css.properties.animation-range-start</key><key>css.properties.animation-range-start.normal</key><key>css.properties.animation-timeline</key><key>css.properties.animation-timeline.scroll</key><key>css.properties.animation-timeline.view</key><key>css.properties.animation.animation-timeline_included</key><key>css.properties.scroll-timeline</key><key>css.properties.scroll-timeline-axis</key><key>css.properties.scroll-timeline-axis.block</key><key>css.properties.scroll-timeline-axis.inline</key><key>css.properties.scroll-timeline-axis.x</key><key>css.properties.scroll-timeline-axis.y</key><key>css.properties.scroll-timeline-name</key><key>css.properties.timeline-scope</key><key>css.properties.timeline-scope.all</key><key>css.properties.timeline-scope.none</key><key>css.properties.view-timeline</key><key>css.properties.view-timeline-axis</key><key>css.properties.view-timeline-axis.block</key><key>css.properties.view-timeline-axis.inline</key><key>css.properties.view-timeline-axis.x</key><key>css.properties.view-timeline-axis.y</key><key>css.properties.view-timeline-inset</key><key>css.properties.view-timeline-inset.auto</key><key>css.properties.view-timeline-name</key></compat_features><canonical_url>https://nowyoucanuse.com/features--scroll-driven-animations.html</canonical_url></feature>