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

  •        28

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

http://airbnb.io/lottie/
https://github.com/airbnb/lottie-android

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.

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

  •    Javascript

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


MvRx - MvRx: Android on Autopilot

  •    Kotlin

MvRx (pronounced mavericks) is the Android framework from Airbnb that we use for nearly all product development at Airbnb. When we began creating MvRx, our goal was not to create yet another architecture pattern for Airbnb, it was to make building products easier, faster, and more fun. All of our decisions have built on that. We believe that for MvRx to be successful, it must be effective for building everything from the simplest of screens to the most complex in our app.

lottie-editor - A tool to edit colors in Lottie animations.

  •    Javascript

Discussion here. Contributions are welcome, help improve this tool. Work in progress.

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.

vue-airbnb-style-datepicker - A VueJs datepicker with a similar look and functionality as the popular AirBnb datepicker

  •    Vue

However, these tests have not been extensive. More or less just trying the datepicker out, and see that it doesn't throw any console errors etc. If you're planning on using this in production, make sure that it runs smoothly in the browsers that you're planning on supporting. I gladly accept contributions to improve this datepicker. But before you start hacking away, please first create an issue where you explain what it is that you think needs to be done and why, so we can agree that the changes makes sense. I wan't to keep this datepicker as close as possible to the original Airbnb datepicker, and not add strange edge cases that complicates the API and makes the size bigger. And it sucks having to deny a PR that someone spent time on, just because the feature/implementation doesn't cut it.

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.

AndroidIconAnimator - Android vector icon animation tool

  •    Javascript

A web-based tool that lets you design icon animations and other animated vector art for Android. Exports to Animated Vector Drawable format for Android. Not intended to replace After Effects or other professional animation tools, but very useful for simple animations.

javascript - JavaScript Style Guide

  •    Javascript

Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent.1.1 Primitives: When you access a primitive type you work directly on its value.

graphql-prisma-typescript - 🏡 GraphQL server reference implementation (Airbnb clone) in Typescript using Prisma & graphql-yoga

  •    TypeScript

This project demonstrates how to build a production-ready application with Prisma and graphql-yoga. The API provided by the GraphQL server is the foundation for an application similar to AirBnB. Note: prisma is listed as a development dependency and script in this project's package.json. This means you can invoke the Prisma CLI without having it globally installed on your machine (by prefixing it with yarn), e.g. yarn prisma deploy or yarn prisma playground. If you have the Prisma CLI installed globally (which you can do with npm install -g prisma), you can omit the yarn prefix.

SVGAPlayer-Android - Similar to Lottie

  •    Java

use layout.xml. Add SVGAImageView via code.

AndroidViewAnimations - Cute view animation collection.

  •    Java

One day, I saw an iOS library, which is a view shaker, it's very beautiful. I think Android also need one, and should be better. So, I started to collect animation effects... and in two days, this project born.

TheGlowingLoader - TheGlowingLoader is the highly configurable library to indicate progress and is natively created for Android Platform

  •    Java

Android Library which is the implementation of The Glowing Loader created by Shashank Sahay. I have made it so that it can be easily customized. You can change line stroke width, line colors, particle colors, disable several effects etc.

DraggableView - Draggable views with rotation and skew/scale effects

  •    Java

Draggable views with rotation and skew/scale effects. SkewView and RotateView containe multipliers which change rotation, skew and scale values.

android-snake-menu - imitate Tumblr's menu, dragging animations look like a snake

  •    Java

I found another repository some time ago which implemments the same dragging effects. Besides, its unfold later-menu effects is much more consistent with original Tumblr effects. You can jump to this repository - here. Several days ago, I installed the tumblr app into my genymotion device, and I was totally shocked by its amazing snake-menu animation which is quite smooth and fluent. Since I cannot clearly describe its visual effects, you’d better install this app and try it yourself. Ok, I am always the one who would like to imitate beautiful things. And I was terribly curious about how its animation is implemented.