By Alex Walker, Tanay Pant, Maria Antonietta Perna,
Animation is a part of a UI designer's job. Here are 9 free animation libraries we think deliver the most power for the smallest file size, while being relatively easy to use for reasonably code-savvy designers that aren't full-blown developers.
By Alex Walker,
The user interfaces we see in popular culture are often more fun than ones we build at work. Here's a code challenge to show us how you'd build your own.
By Craig Buckler,
Craig Buckler describes various ways to use CSS with SVG, covering the benefits of using SVGs, a range of SVG tools, SVGs as static images, CSS inlined SVG backgrounds, responsive SVG images, HTML-inlined SVG images, SVG sprites, SVG effects on HTML content, and portable SVGs.
By Ilya Bodrov-Krukowski,
Ilya Bodrov explains how CSS transforms can be used in the real world to solve various tasks and achieve interesting results — showing how to adjust elements vertically, create nice-looking arrows, build loading animations and create flip animations.
By Craig Buckler,
Craig Buckler shows how to add another dimension to your web pages and applications with the new 3D transformation functions and properties in CSS, covering transform, translate, rotations, scaling, perspective and more, along with z-index, browser gotchas, and ideal use cases.
By Maria Antonietta Perna,
Maria Antonietta Perna walks you through CSS variables/custom properties, the awesome new technology that adds more flexibility and fun to CSS coding.
By Maria Antonietta Perna,
Maria Antonietta Perna explores the Performance Tool available in the Firefox browser to find out more about CSS animation performance.
By Maria Antonietta Perna,
Maria Antonietta Perna gives you an overview of GreenSock plugins to add complex animations to your project quickly and in a few lines of code.
By Michael Romanov,
Michael Romanov explains how you can build a frame by frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers
By Maria Antonietta Perna,
In Part 2 of her GreenSock (GSAP) tutorial for beginners, Maria Antonietta Perna shows how GSAP timeline makes coding complex animations easier and faster.
By Giulio Mainardi,
Giulio Mainardi shows you how to build a 3D rotating carousel using CSS 3D transforms, with some nifty math tricks and some JavaScript to enhance.
By Maria Antonietta Perna,
Maria Antonietta Perna introduces GreenSock in a multi-part article for the Beyond CSS: Dynamic DOM Animation Libraries series. Ready for some cool effects?
By Gajendar Singh,
Gajendar Singh shows how the AOS library (Animate On Scroll) works and how you can quickly animate your site to life with stunning effects on scroll.
By Simon Codrington,
Simon Codrington illustrates some stunning UI design ideas using CSS animation and gradients to inspire your creativity for your next website project.
By Maria Antonietta Perna,
Maria Antonietta Perna introduces Velocity JS, a super featured JavaScript library for DOM animation, and shows how to use it without jQuery dependency.
By Maria Antonietta Perna,
Maria Antonietta Perna presents some front-end learning resources and the new SitePoint Premium's CSS Animation course by Donovan Hutchinson