https://developer.chrome.com/blog/new-in-chrome-115/ Skip to content Home Docs Blog Articles Home Docs Blog Articles Thanks for tuning in to Google I/O. Watch the Chrome content on-demand. Watch now. Dismiss Blog New in Chrome hero logo New in Chrome 115 Published on Thursday, July 13, 2023 Adriana Jara Adriana Jara Adriana is a developer relations engineer Twitter GitHub Table of contents * Scroll driven animations * Fenced Frames * Topics API * And more! * Further reading * Subscribe Here's what you need to know: * Use ScrollTimeline and ViewTimeline to create scroll-driven animations that enhance user experience. * Fenced frames work along other Privacy Sandbox APIs to embed relevant content while preventing unnecessary context sharing. * With the Topics API the browser can share information with third parties about a user's interests while preserving privacy. * And there's plenty more. I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 115. # Scroll driven animations Scroll-driven animations are a common UX pattern on the web. A scroll-driven animation is linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation goes forward or backward in direct response. The following examples demonstrate some use cases. For example you can create reading indicators which move as you scroll: A reading indicator atop a document, driven by scroll. 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. By default, an animation attached to an element runs on the document timeline. Its origin time starts at 0 when the page loads, and starts ticking forward as clock time progresses. This is the default animation timeline and, until now, was the only animation timeline you had access to. The Scroll-driven Animations Specification defines two new types of timelines that you can use: * Scroll Progress Timeline: a timeline that is linked to the scroll position of a scroll container along a particular axis. * View Progress Timeline: a timeline that is linked to the relative position of a particular element within its scroll container. 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.

... @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } #progress { position: fixed; left: 0; top: 0; width: 100%; height: 1em; background: red; transform-origin: 0 50%; animation: grow-progress auto linear; animation-timeline: scroll(); } Read scroll-drive animations for all the details and more examples. # Fenced Frames The Privacy Sandbox is an initiative that aims to create technologies that both protect people's privacy online and give developers tools to build thriving digital businesses. Many of its proposals aim to satisfy cross-site use cases without third-party cookies or other tracking mechanisms. For example: * The Protected Audience API: allows for interest-based ad serving in a privacy-preserving manner. * Shared Storage: allows access to unpartitioned cross-site data in a secure environment. In order to preserve privacy some of these APIs require a new way to embed content. The solution is called a fenced frame. Fenced frames work in combination with other Privacy Sandbox proposals to display documents from different storage partitions within a single page. A fenced frame is a HTML element for embedded content, similar to an iframe. Unlike iframes, a fenced frame limits communication with its embedding context to allow the frame access to cross-site data without sharing it with the embedding context. Similarly, any first-party data in the embedding context cannot be shared with the fenced frame. Feature iframe fencedframe Embed content Yes Yes Embedded content can access embedding Yes No context DOM Embedding context can access embedded Yes No content DOM Observable attributes, such as name Yes No URLs (http://example.com) Yes Yes (dependent on use case) Browser-managed opaque source No Yes (urn:uuid) Access to cross-site data No Yes (dependent on use case) For example, let's say news.example (the embedding context) embeds an ad from shoes.example in a fenced frame. news.example cannot exfiltrate data from the shoes.example ad, and shoes.example cannot learn first-party data from news.example. A comparison of before and after state of storage partitioning. Check out these articles for documentation about Fenced Frames, the Protected Audience API, Shared Storage and more # Topics API In the past, third-party cookies and other mechanisms have been used to track user browsing behavior across sites to infer topics of interest. These mechanisms are being phased out as part of the Privacy Sandbox initiative. The Topics API allows a browser to share information with third parties about a user's interests while preserving privacy. The Topics API enables interest-based advertising (IBA) without tracking the sites a user visits. The browser observes and records topics that appear to be of interest to the user, based on their browsing activity. This information is recorded on the user's device. For example, the API might suggest the topic "Fiber & Textile Arts" for a user who visits the website knitting.example. Topics are a signal to help ad tech platforms select relevant ads. Unlike third-party cookies, this information is shared without revealing further information about the user themself or the user's browsing activity. Read the Privacy Sandbox overview for all the details on the topics taxonomy and using the Topics API # And more! Of course there's plenty more. * The maximum size of a WebAssembly.Module on the main thread increased to 8 megabytes * The CSS display property now accepts multiple keywords as a value, besides the legacy precomposed keywords. * There is an origin trial for the Compute Pressure API, which offers high-level information about the current state of the device hardware. # Further reading This covers only some key highlights. Check the links below for additional changes in Chrome 115. * What's new in Chrome DevTools (115) * Chrome 115 deprecations and removals * ChromeStatus.com updates for Chrome 115 * Chromium source repository change list * Chrome release calendar # Subscribe To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video. Yo soy Adriana Jara, and as soon as Chrome 116 is released, I'll be right here to tell you what's new in Chrome! New in Chrome Chrome 115 Published on Thursday, July 13, 2023 * Improve article Table of contents * Scroll driven animations * Fenced Frames * Topics API * And more! * Further reading * Subscribe Back What's happening in Chrome Extensions? Next DevTools Tips: Record and replay user flows with the Recorder Follow us Contribute * File a bug * View source Related content * web.dev * Case studies * Podcasts Connect * Twitter * YouTube * GitHub Chrome Firebase All products Privacy Terms Content available under the CC-BY-SA-4.0 license This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies. Agree No Thanks