Unlike the classic way of moving a node by removing+reinserting it, the moveBefore method preserves the element’s state!
Move elements around the DOM while preserving their state with moveBefore
Tag Archives: javascript
Move elements around the DOM while preserving their state with
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
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
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 →
JavaScript: Restart all CSS Animations of an Element
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”
Bun is a fast all-in-one JavaScript runtime
Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in. I’ve been following Jarred’s progress on Twitter over the past few weeks and it’s impressive what he has achieved. Building Bun, he also landed a …
Continue reading “Bun is a fast all-in-one JavaScript runtime”
GitHub: How we think about browsers
GitHub is currently shipping ES2019-compatible code, and will soon ship ES2020 code. GitHub will soon be serving JavaScript using syntax features found in the ECMAScript 2020 standard, which includes the optional chaining and nullish coalescing operators. This change will lead to a 10kb reduction in JavaScript across the site. Wow, won’t that exclude a whole …