Talk on animating the <details> element with transition-behavior: allow-discrete , interpolate-size: allow-keywords, and ::details-content.
Animatable Accordions (2024.11.27 @ devs.gent)
Tag Archives: animation
Animate to height: auto; (and other intrinsic sizing keywords) in CSS
Use the interpolate-size property or the calc-size() function to enable smooth transitions and animations from lengths to intrinsic sizing keywords and back.
Max Cooper – Symphony in Acid
Embedded above is the video clip for Max Cooper’s Symphony in Acid This video is from my ‘Unspoken Words’ project, where I tried to express things with music and visual art which I could not put into words. I turned to the writing of Ludwig Wittgenstein, who tackled this issue of the problems with words …
Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock: See the Pen Apple Keynote animation by Louis Hoebregts (@Mamboleoo) on CodePen. Crazy! 🤯 If you’re curious to see how he’s done it, in the demo below he breaks it down step by step: See the Pen Apple Keynote …
Continue reading “Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock”
Scroll Linked Animations With NO JAVASCRIPT!?
Building further upon my posts digging into Scroll-Linked Animations, Gary Simon created this video recreating a basic Scroll-Linked Animation that animates an image as you scroll down the page. Good video if you’re looking for a quick intro. Two minor remarks though: Instead of speeding up the time-range it’s better to tweak the scroll-offsets. Even …
Continue reading “Scroll Linked Animations With NO JAVASCRIPT!?”
SVG Cassette Tape
Past weekend Lou Ottens — inventor of the Casette Tape while working at Philips Hasselt (Belgium) — passed away at the age of 95. Sharing this Greensock-powered SVG Animation by Chris Gannon seems very timely. See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen. Anyone got a pencil? 😅
Drop-in CSS transitions with 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“
Exploring @property and its Animating Powers
Over at CSS-Tricks Jhey Tompkins has written a solid piece on the amazing @property and the possibilities it opens: We can give the browser the information is needs to transition and animate those properties! Covered in the post, amongst many other interesting demos, are Jhey’s own Pure CSS Stopwatch and my own animated gradient border …
Continue reading “Exploring @property and its Animating Powers”
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 2)
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1)
