javascript – Bram.us

Introducing `view-transitions-mock`: A non-visual Polyfill for Same-Document View Transitions

View Transitions are a powerful Modern Web feature allow for smooth seamless animated transitions two between different states of a web page. They can make for a much more pleasant user experience, but as with any new web platform feature, browser support is not yet fully universal so you need to add some fallback logic to your code.

view-transitions-mock bridges that gap. It is a spec-compliant JavaScript implementation of Same-Document View Transitions that polyfills the entire JavaScript API surface of the spec, but that doesn’t do the animation bits.

View Transitions Applied: Dealing with the Snapshot Containing Block

Beware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing them back. This post details the pitfalls and how to deal with them, unlocking more performant animations on the ::view-transition-group() pseudo along the way.

Solved by `StyleObserver`: `Element.matchContainer()`

Martin Winkler published a package that polyfills Element.matchContainer to get notified in script when a Container Query matches/unmatches. Under the hood, it uses a StyleObserver.

Move elements around the DOM while preserving their state with `moveBefore`

Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!

View Transitions Snippets: Keeping track of the old and new positions of a transitioned element

By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.

View Transitions Snippets: Getting all Animations linked to a View Transition

A few lines of JavaScript to get all animations linked to an active View Transition.

Syntax Highlighting code snippets with Prism and the Custom Highlight API

Can you Syntax Highlight a code snippet on the web without overloading the DOM with a ton of <span> elements wrapped around the tokens? Thanks to the Custom Highlight API, you can!

Run a Scroll-Driven Animation only once

A small piece of JavaScript to run a scroll-driven animation only once.

Synchronize videos, 3D-models, etc. to Scroll-Driven Animations

With a little bit of JavaScript, you can control 3D models and videos using Scroll-Driven Animations

Two JavaScripts

Remy Sharp: There are two JavaScripts. One for the server – where you can go wild. One for the client – that should be thoughtful and careful. Yes, a thousand times YES! Two JavaScripts →