Archive for the ‘animation’ Category

Developer/Designer Page Layout Concept

View demo Download source Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer. When y...

Make Your Website Interactive and Fun with Velocity.js (No jQuery)

Posted on: No Comments
Special thanks from me go to James Hibbard and the developers behind Velocity for reviewing this article. Also to users and developers who contribute and have contributed to Velocity over the years. In this article I introduce Velocity.js, a fast an...

Inspiration for Grid Loading Animations

View demo Download source Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have th...

Book Release: SVG Animations

Posted on: No Comments
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. ...

Making Animations Wait

Posted on: No Comments
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 app...

Building Performant Expand & Collapse Animations

Posted on: No Comments
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 poss...

The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)

Posted on: No Comments
Whenever we need to perform DOM manipulation, we're all quick to reach for jQuery. However, the vanilla JavaScript DOM API is actually quite capable in its own right, and since IE < 11 has been officially abandoned, it can now be used without any w...

Expanding Bar Navigation Concept

View demo Download source Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation is either shown in a...

Creating a Book Cover Using JavaScript and p5.js

Posted on: No Comments
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 ...

Animate in Ajax’d Content to its Natural Height

Posted on: No Comments
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 Aj...