A rather geeky/technical weblog, est. 2001, by Bramus
Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results. This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled …
transition.css
transition.css is a handy stylesheet by Adam Argyle, full of transitions you can apply on your page. Simply import the stylesheet and set a transition-style attribute on the elements you wish to animate for the effect to kick in: <link rel="stylesheet" href="https://unpkg.com/transition-style" /> <div transition-style="in:wipe:up">👍</div> Not explicitly mentioned on the demo page (but is in …
Continue reading “Drop-in CSS transitions with transition.css“
Putting libraries like GSAP and Framer Motion and React Spring aside, Josh W. Comeau digs into the transition property — “the CSS motion workhorse” as he calls it — and easing functions. I especially like the sandbox at the very end of the post that lets you play the various easing functions and framerate An …
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up. Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom grows from a few pixels in height to 100vh, creating the gooey effect. <div class="content …
jquery.smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience. Works by hijacking links, requesting the target URL over XHR, and then replacing the content of a specified element on the current page with the contents of that same element from …
Continue reading “Full page transitions with jquery.smoothState.js”