A rather geeky/technical weblog, est. 2001, by Bramus
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.
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.
moveBefore
Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
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!
With a little bit of JavaScript, you can control 3D models and videos using Scroll-Driven Animations
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 →
Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick: const restartAnimations = ($el) => { $el.getAnimations().forEach((anim) => { anim.cancel(); anim.play(); …
Continue reading “JavaScript: Restart all CSS Animations of an Element”
