“What’s new in web animations” – my talk at Google I/O 2023
Tag Archives: web animations
The new native web: Bye bye animation libraries?
Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup: Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have …
Continue reading “The new native web: Bye bye animation libraries?”
New in Chrome 84
Chrome 84 has been released, which contains some nice additions. Pete LePage walks us through: Chrome 84 is rolling out now! Users can start common tasks within your app with App Icon Shortcuts. The Web Animations API adds support for a slew of previously unsupported features. Wake Lock, and the Content Indexing API graduate from …
Playing With Particles Using the Web Animations API
Louis Hoebregts writing for CSS-Tricks When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can. In this post, we’ll make even more particle magic using the Web …
Continue reading “Playing With Particles Using the Web Animations API”
Getting Started with the Web Animations API
The Web Animations Api (short WAAPI) tries to combine the power of CSS with the flexibility of Javascript in order to allow complex animation sequences. There are big differences between the WAAPI and for example libraries like GSAP, the biggest one being that the WAAPI is going to provide native browser support without needing to …
Continue reading “Getting Started with the Web Animations API”
Web Animations now in Chrome
snowFlake.animate([ {transform: ‘translate(‘ + snowLeft + ‘px, -100%)’}, {transform: ‘translate(‘ + snowLeft + ‘px, ‘ + window.innerHeight + ‘px)’} ], { duration: 1500, iterations: 10, delay: 300 }); Glad to see this one land 🙂 Web Animations – element.animate() is now in Chrome 36 → Related: Web Animations Preview Web Animations Polyfill
Web Animations Polyfill
<div class=”pulse” style=”width:150px;”>Hello world!</div> <script> var elem = document.querySelector(‘.pulse’); var player = document.timeline.play(new Animation(elem, [ {opacity: “0.5”, transform: “scale(0.5)”}, {opacity: “1.0”, transform: “scale(1)”} ], { direction: “alternate”, duration: 0.5, iterations: Infinity })); </script> An emulator of the Web Animations specification. Please note that this is still experimental, and that the specification is likely to change …
Web Animations Preview
A brief introduction to some of the concepts in the Web Animations specification — an attempt to overcome some of the limitations with both CSS and SVG animations and unify them at the same time — currently being defined by Mozilla, Google, and Adobe under the W3C Web Animations 1.0 (Editor’s Draft) →