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 […]

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 […]

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 […]