Our mobile browsers continue to get more powerful and better at showing us amazing, beautiful animations. When combined with the layout power of CSS, it’s possible to create some gorgeous work without using any images at all. The result is scalable, quick-loading, and well, impressive to see.
Full timeline control, import & export JSON, inspect animations, intuitive interface, live editing, easy to understand API, aimed at speed, and realtime feedback: all the things you could ever want in a graphical user interface when creating and managing web animations. In this article we’ll take a look at the newest tool available for web animators called Spirit by Patrick Brouwer. We’ll learn how it can change the way you create animations on the web. Let’s animate!
GreenSock is and has long been one of my favorite libraries on the planet when it comes to SVG and other complex web animations. For this article I’m pleased to present a wonderful addition to the GSAP platform titled “GSDevTools”. This is a collection of tools that will certainly excite many GreenSock users who need an interface to interact with their GreenSock code. Let’s take a deeper look at this wonderful new feature by our friends Jack and Carl at GreenSock.
With motion on the rise amongst web developers so too are the tools that help to streamline its creation. Haiku is a stand-alone application available to Mac users and also available as an in-browser option. By its own description “Design imaginative UI components that snap into any web app. Code optional.” In this article we’ll look over this new tooling available to motion lovers of all kinds; let’s dive in and explore all that is Haiku!
GitHub is a great place to find projects that are freely distributed to the public, but have you ever starred a repo only to forget how cool and useful it could be? In this article I’ll bring to light some fantastic projects freely available on GItHub that have a strong focus on helping animators building motion for the web.
Animated icons are great for giving your website or app that sleek, polished look. In our new short course, Animating Icons With Adobe Illustrator and After Effects, you’ll learn how to design and animate icons from scratch.
Our popular web design course, Practical Web Animation, gives an in-depth four-hour introduction to animating buttons, images, and other web elements.
When we mention CSS in discussions we often speak of it as a dumbed down language. A declarative language, lacking logic and insight; but that isn’t the true reality. For years developers have been craving variables in standard CSS, having been spoiled by pre-processors such as LESS and Sass for so long.
CSS has matured in many ways over the years, not least in terms of CSS animations. With each day that passes more and more developers are creating living, breathing interfaces. In this article we’ll look at the state of CSS animations, how it has grown, what it’s capable of today and cover some resources and tools available. Let’s get moving!
Sequence.js is a CSS animation framework which you can use to create sliders, presentations, and other step-based applications. It has all the necessary functionality built in; all you have to do is add your content and styling.
CodePen is a great place to find inspiration and see what crazy UI experiments others are coming up with. As well as this, it’s also a useful place to find educational content. In this roundup we’ll explore some cool examples of CodePens that teach us all about web animation.