3D Gear Animation Example
Here’s a 3D animation that I created for part of another project. Unlike some of the other gears on this page, in Lottie and GIF format, this HD video animation is ideal for a landing page or part of a larger video series.
Isolating the glowing gear to have all the movement in this video focuses in on a specific portion of the video. Nothing else is moving in this particular scene.
Looping Animated Gears GIF
A Seamlessly-looping gear rig on a white background in Lottie Format. Browse other gear animation examples below.
All colors can be changed and can be exported as a GIF, JSON (web) or video format. With some further tweaking and design work, the gears could be different shapes and sizes and a whole chain of gears added. The smaller gears typically rotate faster than the larger sizes.
The GIF’s total time is 10 seconds in duration (allowing for one full rotating before repeating itself.
GIF Creation Process:
This animated GIF was laid out first in Adobe Illustrator and exported into Adobe After Effects for animating. This gear rig uses nothing more than regular shape layers, circles, rounded rectangles (that make up the cog components of the gear’s exterior) and a semi-circle for the white interior streaks.
Lottie Gears Rotating
Below is a Lottie animation, siilar to the video above (glowing gears) this format is ideal for the web and apps. Lottie is an overall smaller file size than GIF and supports a full background transparency.
Gear Button Icon
Next up is an animated gear icon (created with vector shapes) embedded inside a button. This button could be exported to GIF, JSON, or video format. Not all formats support transparent background so it’s important to understand where you will use the animation.
GIFs are the easiest format to embed in the web or presentations (PPT, Keynote, Prezi, etc.) but the background color will need to match the final background area. GIFs don’t do a great job of supporting transparent backgrounds.
Vector Flat Gear Icon
These three formats shown are all in “JSON/Lottie.” These are all essentially SVG formats, otherwise known as ‘Scaleable Vector Graphics.’ This is one of the more popular animated icon formats for the web.
Typically these are created in Adobe Illustrator (or another vector-based software) and then exported to an animating software for movement. SVGs do not move on their own, this is a common misconception.
The benefits of using this type of animation is faster loading time and fully-transparent background.
Transparent Gear Animation
If you’re looking for a transparent Gear animation there are a variety of formats ready for the web, video overlays and more.
A popular format that supports full background transparency is called “Lottie” animation. Click on the three orange cogs here and watch them start to spin.
The great thing about Lottie format for the web is that the style supports user-interactions and looping capabilities.
(click to play)
