Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
waapi

11 Articles
{
,

}
Direct link to the article How I Used the WAAPI to Build an Animation Library
waapi

How I Used the WAAPI to Build an Animation Library

The Web Animations API lets us construct animations and control their playback with JavaScript. The API opens the browser’s animation engine to developers and was designed to underlie implementations of both CSS animations and transitions, leaving the door open to …

Avatar of Okiki Ojo
Okiki Ojo on Jun 16, 2021 (Updated on Jun 19, 2021)
Direct link to the article How to Animate the Details Element Using WAAPI
accordion details/summary waapi

How to Animate the Details Element Using WAAPI

Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2006.

In this article, we will see how you can animate the native …

Avatar of Louis Hoebregts
Louis Hoebregts on Nov 5, 2020
pseudo elements waapi

Pseudo-elements in the Web Animations API

Direct Link

To use the Web Animations API (e.g. el.animate()) you need a reference to a DOM element to target. So, how do you use it on pseudo-elements, which don’t really offer a direct reference? Dan Wilson covers a (newish?) part …

Avatar of Chris Coyier
Shared by Chris Coyier on May 13, 2020
Direct link to the article Tips for Writing Animation Code Efficiently
animation GSAP waapi

Tips for Writing Animation Code Efficiently

I’ve been coding web animations and helping others do the same for years now. However, I have yet to see a concise list of tips focused on how to efficiently build animations, so here you go!

I will be using …

Avatar of Zach Saucier
Zach Saucier on Apr 10, 2020 (Updated on Feb 19, 2022)
Direct link to the article Playing With Particles Using the Web Animations API
particles waapi

Playing With Particles Using the Web Animations API

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 …

Avatar of Louis Hoebregts
Louis Hoebregts on Mar 18, 2020 (Updated on Mar 30, 2020)
Direct link to the article Additive Animation with the Web Animations API
animation waapi

Additive Animation with the Web Animations API

These features have not landed in any stable browsers at the time of writing. However, everything discussed is already in Firefox Nightly by default and key parts are in Chrome Canary (with the Experimental Web Platform Features flag enabled), so …

Avatar of Dan Wilson
Dan Wilson on Jan 2, 2018 (Updated on Mar 30, 2020)
animation flip JavaScript waapi

Animating Layouts with the FLIP Technique

User interfaces are most effective when they are intuitive and easily understandable to the user. Animation plays a major role in this – as Nick Babich said, animation brings user interfaces to life. However, adding meaningful transitions and micro-interactions …

Avatar of David Khourshid
David Khourshid on Nov 27, 2017 (Updated on Mar 30, 2020)
animation GSAP Sass waapi

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept …

Avatar of Opher Vishnia
Opher Vishnia on Jul 4, 2017 (Updated on Mar 30, 2020)
Direct link to the article CSS Animations vs Web Animations API
keyframes waapi web animation

CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series.

In this article, …

Avatar of Ollie Williams
Ollie Williams on Jun 13, 2017 (Updated on Aug 18, 2018)
animation canvas GreenSock shape morphing waapi webgl

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It’s a complicated question and complicated answer. This post serves …

Avatar of Sarah Drasner
Sarah Drasner on May 2, 2016 (Updated on Mar 30, 2020)
waapi

Let’s talk about the Web Animations API

Direct Link

Dan Wilson has an intro article followed by a 5-part series all about the Web Animations API. If you were unaware, .animate() is a native thing now. I think there is a ton of interesting things about the Web Animations …

Avatar of Chris Coyier
Shared by Chris Coyier on Sep 13, 2015 (Updated on Mar 30, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Mastodon
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top