{ "compat_features": [ "css.properties.animation-trigger", "css.properties.animation-trigger.none", "css.properties.timeline-trigger", "css.properties.timeline-trigger-activation-range", "css.properties.timeline-trigger-activation-range-end", "css.properties.timeline-trigger-activation-range-end.normal", "css.properties.timeline-trigger-activation-range-start", "css.properties.timeline-trigger-activation-range-start.normal", "css.properties.timeline-trigger-activation-range.normal", "css.properties.timeline-trigger-active-range", "css.properties.timeline-trigger-active-range-end", "css.properties.timeline-trigger-active-range-end.auto", "css.properties.timeline-trigger-active-range-end.normal", "css.properties.timeline-trigger-active-range-start", "css.properties.timeline-trigger-active-range-start.auto", "css.properties.timeline-trigger-active-range-start.normal", "css.properties.timeline-trigger-active-range.auto", "css.properties.timeline-trigger-active-range.normal", "css.properties.timeline-trigger-name", "css.properties.timeline-trigger-name.none", "css.properties.timeline-trigger-source", "css.properties.timeline-trigger-source.auto", "css.properties.timeline-trigger-source.none", "css.properties.timeline-trigger.auto", "css.properties.timeline-trigger.none", "css.properties.timeline-trigger.normal", "css.properties.trigger-scope", "css.properties.trigger-scope.all", "css.properties.trigger-scope.none" ], "description": "Scroll-triggered animations start and stop CSS animations when an element is within or outside a scrolling range. It's an alternative to applying styles with the IntersectionObserver API. Not to be confused with scroll-driven animations.", "description_html": "Scroll-triggered animations start and stop CSS animations when an element is within or outside a scrolling range. It's an alternative to applying styles with the IntersectionObserver API. Not to be confused with scroll-driven animations.", "group": [ "scrolling", "animation" ], "kind": "feature", "name": "Scroll-triggered animations", "spec": [ "https://drafts.csswg.org/animation-triggers-1/" ], "status": { "baseline": false, "by_compat_key": { "css.properties.animation-trigger": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.animation-trigger.none": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-activation-range": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-activation-range-end": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-activation-range-end.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-activation-range-start": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-activation-range-start.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-activation-range.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range-end": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range-end.auto": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range-end.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range-start": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range-start.auto": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range-start.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range.auto": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-active-range.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-name": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-name.none": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-source": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-source.auto": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger-source.none": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger.auto": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger.none": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.timeline-trigger.normal": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.trigger-scope": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.trigger-scope.all": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "css.properties.trigger-scope.none": { "baseline": false, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } } }, "support": { "chrome": "146", "chrome_android": "146", "edge": "146" } }, "id": "scroll-triggered-animations", "groups": [ "scrolling", "animation" ], "specs": [ { "url": "https://drafts.csswg.org/animation-triggers-1/", "seriesComposition": "full", "shortname": "animation-triggers-1", "series": { "shortname": "animation-triggers", "currentSpecification": "animation-triggers-1", "title": "Animation Triggers", "shortTitle": "Animation Triggers", "nightlyUrl": "https://drafts.csswg.org/animation-triggers/" }, "seriesVersion": "1", "organization": "W3C", "groups": [ { "name": "Cascading Style Sheets (CSS) Working Group", "url": "https://www.w3.org/groups/wg/css/" } ], "nightly": { "url": "https://drafts.csswg.org/animation-triggers-1/", "status": "Editor's Draft", "alternateUrls": [ "https://w3c.github.io/csswg-drafts/animation-triggers-1/", "https://w3c.github.io/csswg-drafts/animation-triggers/" ], "repository": "https://github.com/w3c/csswg-drafts", "sourcePath": "animation-triggers-1/Overview.bs", "filename": "index.html" }, "title": "Animation Triggers", "source": "spec", "shortTitle": "Animation Triggers", "categories": [ "browser" ], "standing": "good", "fragment": null } ], "mdnUrls": [], "standardPositions": [], "hasNegativeStandardPosition": false, "stateOfSurveys": [], "chromeUseCounters": {}, "interop": [], "wpt": null, "developerSignals": null, "bugs": {}, "useCases": null, "baselineLowDateAsObject": null, "baselineHighDateAsObject": null }