Here’s a code sample that uses an anonymous Scroll Progress Timeline to create a reading progress indicator fixed to the top of the viewport. View Progress Timeline: a timeline that is linked to the relative position of a particular element within its scroll container.Scroll Progress Timeline: a timeline that is linked to the scroll position of a scroll container along a particular axis.The Scroll-driven Animations Specification defines two new types of timelines that you can use: This is the default animation timeline and, until now, was the only animation timeline you had access to. Its origin time starts at 0 when the page loads, and starts ticking forward as clock time progresses. Scroll-driven animations can also create elements that fade-in as they come into view: The images on this page fade-in as they come into view.īy default, an animation attached to an element runs on the document timeline. For example you can create reading indicators which move as you scroll: A reading indicator atop a document, driven by scroll. The following examples demonstrate some use cases. This means that as you scroll up or down, the linked animation goes forward or backward in direct response. A scroll-driven animation is linked to the scroll position of a scroll container. Scroll-driven animations are a common UX pattern on the web. Let’s dive in and see what’s new for developers in Chrome 115. With the Topics API the browser can share information with third parties about a user's interests while preserving privacy.

Fenced frames work along other Privacy Sandbox APIs to embed relevant content while preventing unnecessary context sharing.Use ScrollTimeline and ViewTimeline to create scroll-driven animations that enhance user experience.

Updated google chrome