lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native

  •        87

Or get it from the adobe store https://creative.adobe.com/addons/products/12557 CC 2014 and up.

https://github.com/airbnb/lottie-web

Tags
Implementation
License
Platform

   




Related Projects

LottieXamarin - Render After Effects animations natively on Android, iOS, MacOS and TvOS for Xamarin

  •    CSharp

All of these animations were created in After Effects, exported with Bodymovin, and rendered natively with no additional engineering effort. Bodymovin is an After Effects plugin created by Hernan Torrisi that exports After effects files as json and includes a javascript web player. We've built on top of his great work to extend its usage to Android, iOS, and React Native.

lottie-ios - An iOS library to natively render After Effects vector animations

  •    Objective-C

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!

lottie-react-native - Lottie wrapper for React Native.

  •    Java

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. After this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.


ImageMagick

  •    C++

ImageMagick is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

Keyframes - A library for converting Adobe AE shape based animations to a data format and playing it back on Android and iOS devices

  •    Javascript

Keyframes is a combination of (1) an ExtendScript script that extracts image animation data from an After Effects file and (2) a corresponding rendering library for Android and iOS. Keyframes can be used to export and render high quality, vector based animations with complex shape and path curves, all with minimal file footprint. For a detailed list of constraints for developing animations to use with the Keyframes library, please refer to the Keyframes After Effects Guidelines.

progress-bar-animation - Making a Doughnut Progress Bar - research notes

  •    Javascript

Looking through the different CSS pie chart implementations I decided that CSS is not fitted for the job. All solutions were hacks that would be hard to control. I was also worried that it will be cumbersome to make it work on all the browsers that we support. Canvas, with almost universal support, seemed more appealing. However, canvas would require me to implement timing (e.g. easing functions) and scaling (to support higher dpis) myself. Besides, I though that it would not utilize GPU as well as CSS transitions/transforms. SVG seemed like the best of both worlds: it's universally supported, doesn't need any hacks to create a required shape, utilizes CSS transitions to create animations and fits all screen dpis out of the box. So, I dusted off my SVG knowledge and started coding. Happy with the result, I sprinkled it with some CSS magic and made a short video showing it in action.

OffCanvasMenuEffects - Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations

  •    CSS

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

prop-types - Custom React PropType validators that we use at Airbnb.

  •    Javascript

Custom React PropType validators that we use at Airbnb. Use of airbnb-js-shims or the equivalent is recommended.Since PropTypes are typically not included in production builds of React, this library’s functionality serves no useful purpose. As such, when the NODE_ENV environment variable is "production", instead of exporting the implementations of all these prop types, we export mock functions - in other words, something that ensures that no exceptions are thrown, but does no validation. When environment variables are inlined (via a browserify transform or webpack plugin), then tools like webpack or uglify are able to determine that only the mocks will be imported - and can avoid including the entire implementations in the final bundle that is sent to the browser. This allows for a much smaller ultimate file size, and faster in-browser performance, without sacrificing the benefits of PropTypes themselves.

kdenlive - Powerful multi-track video editor

  •    C++

Kdenlive is a video editor, which supports DV, AVCHD (experimental support) and HDV editing. Kdenlive relies on several other open source projects, such as FFmpeg and MLT video framework. It is designed to answer all needs, from basic video editing to semi-professionnal work. Kdenlive can read, edit and export Flash video. Kdenlive supports most audio formats for reading, mixing and exporting. It also offers experimental support for non-destructive audio and video codec.

jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths

  •    Javascript

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Look at the demos for more advanced usages.

GreenSock-JS - GreenSock's GSAP JavaScript animation library (including Draggable).

  •    Javascript

GSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See the "Why GSAP?" article for what makes GSAP so special. Unlike monolithic frameworks that dictate how you structure your apps, GSAP is completely flexible; sprinkle it wherever you want. React, Vue, Angular or vanilla JS - doesn't matter. Simply put, GSAP is the most robust high-performance animation library on the planet, which is probably why every major ad network excludes it from file size calculations.

anime - JavaScript Animation Engine

  •    Javascript

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. The targets property defines the elements or JS Objects to animate.

macSVG - macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ---

  •    Objective-C

May 8, 2018 – macSVG v1.1.4 is released, with minor user interface improvements, and various bug fixes. See the Release Notes for details. macSVG is a MIT-licensed open-source macOS app for designing HTML5 SVG 1.1 (Scalable Vector Graphics) art and animation.

InteractiveCanvas - Library for distribution canvas animation over set of devices

  •    Java

The library distributes canvas animation over set of devices. The library is based on pretty dumb method: Picture class has writeToStream and createFromStream methods which serializes and deserializes Picture object respectively. After serialization byte array sends to a client device as UDP packet. On a client device the packet is deserialized back into Picture object and finaly rendered on a Canvas. That's all.

timeliner - simple javascript timeline library for animation and prototyping

  •    Javascript

Timeliner is a graphical graphical tool to help create and prototype animations quickly. It is useful for adjusting variables and checking out how the effects changes over time with keyframing and easing/tweening functions. It may also have some similarities with the timeline component of adobe flash, after effects, edge animate or other animation software. It is written in javascript and meant to work with different javascript libraries or webgl frameworks, in 1d, 2d, or 3d. It is built primary for myself, but feel free to send me suggestions or requests.