Skip to main content
CSS is fun and cool and I like it.
Article

The Making of the CSS-Tricks Logo Easter Egg Animation

When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interaction.

I’ve been working a ton with the GreenSock Animation Platform and SVG lately. If you are not aware of it, is worth checking out. It’s … Read article

Article

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website … Read article

Article

Animations: the Angular Way

AngularJS is a major player in the JavaScript MVW framework world. 'Thinking in Angular' is something that can elude developers who come from jQuery or other DOM manipulation heavy libraries. There is an 'Angular way' to do things that is data-driven rather than using DOM traversal to drive view changes, and that can be hard to visualize when it comes to something like animations. Together, we will go through exactly how to animate with the tools provided by the Angular … Read article

Almanac

will-change

The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation.

This property has four values:

  • auto: standard browser optimizations will be applied.
  • scroll-position: indicates that the element’s scroll position will be animated sometime in the near future so the browser will prepare for content which is not visible in the scroll window of an element.
  • contents: the
Read article

27: Animating SVG with JavaScript

JavaScript is the last of the ways we'll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can't do a number of SVG properties that you might want to animate. Then we looked at SMIL, which is a declarative syntax right in the SVG code itself, which is more powerful in that it can animate more things including the shape of the element themselves.

JavaScript can do everything either of those can do, … Read article

23: Animating SVG with SMIL

Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but if you want a complete reference guide definitely check out A Guide to SVG Animations (SMIL) by Sara Soueidan right here on CSS-Tricks.

SMIL stands for Synchronized Multimedia Integration Language. As I understand it, that is a "thing" all unto … Read article

Article

A Guide to SVG Animations (SMIL)

Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epicRead article