Animated Bell Notification: JSON Lottie Format

This bell notification icon is animated in the JSON Format. It’s ready for iOS and Android devices. Shown here is JSON, for the web. One of the major differences between JSON and GIF format is the file size and installation process.  This is just an example for WordPress but the same animation can be reformatted for video, GIF or social media. 

(Shown here is a red bell, similar to that of YouTube’s. Other considerations for this animation are the color, speed of “ringing” and icon in the middle of the bell)

Animation Creation & Customization

Created using Adobe Illustrator and Adobe After Effects. Uploaded to this website using the “Lottie” framework for WordPress. This animation can be reformatted for video, social media, GIFs and more. All colors and dimensions can be reformatted to match your company colors and brand.

iOS and Android Ready: Using Lottie

The bulk of the work when going about creating an iOS loading animation is done in after effects. The Lottie framework, by AirBNB (yes that AirBNB), can then be used to import/export animations. Whether you are using  Xcode, Swift, or another iOS development platform you can easily add in your JSON animation. If you don’t know what any of this means, don’t worry..you’re developer will 100% know (if they don’t they probably aren’t the right iOS developer).

JSON format is ideal for mobile application and development (iOS and Android). JSON format is an interesting format as it looks like “robot speak” at first glance (a bunch of binary numbers, letters and characters). This is essentially a text file that holds all the data to-be-uploaded to your website or app. When uploaded, the animation appears as a GIF animation but with a clean transparent background.

Start a Conversation...

Looking for something similar or have questions about custom animations?. I’d be glad to chat further about your project or start something similar for you.