Lottie is a JSON (JavaScript Object Notation) open file format for animation. It helps artists, designers and animators to include animations on multiple platforms quickly and easily, with very small files and zero distortion.
Get started with Lottie animations by trying some top templates for After Effects. Here, we review ten premium templates from Envato Elements and Envato Market.
10 Top Lottie Animation Templates for After Effects
Featured Template Pack: Isometric Concept — Lottie Edition
Ten premade scenes and 50 isometric elements are included in the Isometric Concept — Lottie Edition template for After Effects, offering you unlimited variations.
Project Details
This project was created by Envato Elements author IconsX.
Key Features
All elements have been optimised for the Lottie plugin or Bodymovin' customization, making them perfect for web, app or social media use.
Download and Try
With a subscription to Envato Elements you get unlimited After Effects templates, video, audio, images, graphics and more.
More Lottie Animation Templates From Envato Elements
Unlimited downloads from Envato Elements mean you can try as many After Effects templates as you like, so if the above template isn't quite your style, no worries! Here are some great alternatives.
- Try Animated Online Education Icons which feature popular education scenes in simple, flat style.
- Animated Smart Technology Icons features popular technology and energy icons with simple, effective animations.
- If you want something less specific, give Universal — Animation Icons a go for a good selection of frequently required icons like a clock, computer and headset.
- If digital communication is your thing then Communication — Filled Outline Animated Icons has everything you need, from a WI-FI network to geolocation pin and more.
- Digital Marketing — Filled Outline Animated Icons are a good mix of nicely animated icons with simple colours.
After Effects Templates for Lottie Animations on Envato Market
If an Elements subscription doesn't fit your project or you don't find what you need, with After Effects templates from Envato Market you can keep your work on a budget and still use great design. Here's a selection to choose from:
Office Animated Icons Set — Wordpress Lottie JSON SVG — $39
64 animated icons themed around an office, grouped into: tools, environment, equipment and employee. The icons come in both JSON and HTML format, plus the customised AE Project File is included.
Discount Animated Icons Set — Wordpress Lottie JSON SVG — $39
Need some discount or sale icons? Try this After Effects Lottie pack with 64 animated icons. They're grouped into price, product, payment and statistic. They're 100% resizable and you can change the colours and stroke width quickly and easily.
Sports & Fitness — Animation Icons — $16
A simple set of sport and health themed icons with looping animation. Make all your changes right in After Effects, plus all icons are 100% resizable and include healthy food, cycling, a fitness tracker and much more.
Design and development — Animation Icons — $16
A set of Bodymovin-optimised animated icons with easy customization. Icon design includes video production, illustration, developing ideas and more.
More Resources for Animations
To help you get creative, here are more free resources from Envato Tuts+.
Keep Studying with Envato Tuts+
Popular Animation Tutorials
- How to Build a Coming Soon Page With Lottie Animations
- How to Create 9 Different CSS Hover Effects From Scratch
- How to Add Adobe After Effects Animations to a Web Page
Recommended Tutorials
If you'd like to learn more about animations and particularly how you can control more elements of them, try our Best Free and Open-Source JavaScript Animation Libraries which has a comprehensive look at the different types freely available and how to best use them. It includes Lottie, too!
Free Video Courses: Follow Envato Tuts+ on YouTube
If learning how to animated in After Effects appeals to you, you might enjoy this free course from Dave Bode: How to Animate in After Effects, which uses three different projects to teach you various aspects of animation, things like text reveals, AE expressions and more to help you create both complex and subtle movements in your animations.
More Animation Resources
Find more top templates and tips for animations in these articles:
-
How to Animate on Scroll With Vanilla JavaScript
-
Build a JavaScript Page Loading Animation With GSAP
-
How to Create Mobile App Animations With SVGator
-
Best CSS Animations and Effects on CodeCanyon
About This Page
How We Picked
We looked at projects and considered all kinds of variables, including organization, complexity, experience required and overall difficulty, minimum hardware specifications, included versions and options, formats, resolution, file size, dependencies and required plug-ins (if any), language options, software versions supported, style, design, and cost. You can read more about how we select items at How We Pick Video Templates to Feature on Envato Tuts+.
About the Authors
Marie Gardiner is a writer and photographer from the North East of England. After gaining her degree in Film and Media, Marie worked in the media industry, before leaving to set up the business she runs with her partner: Lonely Tower Film & Media. As well as writing about visual practices like photography and video, Marie is also the author of Sunderland Industrial Giant (The History Press, 2017) and Secret Sunderland (Amberley Publishing 2019). Her photographic work focuses on landscapes and industrial ruins, particularly those of the North Pennines as she continues to work on her long-form documentary project Changing Landscapes.
Jackson Couse edited and published this page on October 14th, 2021.
Share Your Craft on the Envato Forums
Finally, if you put one of these After Effects templates to use, please do let us know on the Envato forums. We love to see the projects you create!
No comments:
Post a Comment