Archive | Animation

RSS feed for this section

Building Performant Expand & Collapse Animations

It’s starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move and resize elements any-which-way.

You can even get tricky and fake the animating of other properties with transforms. In this tutorial on the Google Chrome Developers Blog, Paul Lewis and …


Building Performant Expand & Collapse Animations is a post from CSS-Tricks

Making Animations Wait

I recently launched a CSS animation course for designers and developers wanting to improve their web animation skills. While building the course, I ran into the issue where content would animate before assets had downloaded. This article covers the approach I put together to fix the problem and ensure all animations played when expected.

We’ve all been there. For example, we want to fade in a hero header on load, so we add the fade-in keyframes, setting up the animation, …


Making Animations Wait is a post from CSS-Tricks

Book Release: SVG Animations

Our own Sarah Drasner has published a book! You can grab it from the O’Reilly website or Amazon.

If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O’Reilly site.

Foreword

Have you ever learned a new word, then had the opportunity to use that word in the perfect situation come up a number of times that week? That’s what it feels …


Book Release: SVG Animations is a post from CSS-Tricks

Creating a Book Cover Using JavaScript and p5.js

I recently published a book and an interactive course called Coding for Visual Learners. It teaches coding to beginners from scratch using the widely popular JavaScript programming language and the p5.js programming library. Since p5.js a great and an easy to use drawing library, I wanted to make use of it to create the cover of my book and course as well. This is a tutorial on how to create this particular visual using JavaScript and p5.js.

p5.js is …


Creating a Book Cover Using JavaScript and p5.js is a post from CSS-Tricks

Animate in Ajax’d Content to its Natural Height

Let’s combine three things we just learned here on CSS-Tricks:

One, transitioning to auto dimensions. Two, Ajaxing for stuff in a modern way. Three, waiting for images to be loaded to measure them.

With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky!

Here’s the final demo:

See the Pen Slide in Ajax Content by Chris Coyier (@chriscoyier) on …


Animate in Ajax’d Content to its Natural Height is a post from CSS-Tricks

An Animated Intro to RxJS

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely bewildered when you first tried learning about it.

According to ReactiveX.io:

ReactiveX is a library for composing asynchronous and event-based programs by using observable sequences.

That’s a lot to digest in a single sentence. In this …


An Animated Intro to RxJS is a post from CSS-Tricks

An Introduction to the Reduced Motion Media Query

The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript.

Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

A brief history of Reduced Motion

When it was released in …


An Introduction to the Reduced Motion Media Query is a post from CSS-Tricks

Intro to Vue.js: Animations

This is the fifth part in a five-part series about the JavaScript framework, Vue.js. In this last part of the series, we’ll cover Animations (if you know me at all, you probably knew this was coming). This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framework has to offer.

Article Series:

  1. Rendering, Directives, and Events
  2. Components,


Intro to Vue.js: Animations is a post from CSS-Tricks