3. August 2020 By: Nils Pospischil

Animated Social Media Posts

Most of the videos published on social media platforms use animations to increase the attention of the audience. Audiocado enables you to promote your podcast or audio with engaging videos in an easy way. By animating your audio you already increase your attention of your followers. But you can animate much more. You can animate headlines, images etc. Everything you can see in your social media posts can be animated. Everything with motion increase the attention of your audience!

According to many social media marketing experts, video is one of the best tools to take your business to the next level, as on Facebook alone, videos receive 8 billion views a day.

To provide the best visualization service for podcasters it is necessary to add animations to the audiocado system . For getting an overview about the possibilities we will discuss the differences between the animation systems for web applications technically. We need to consider which library suites our requirements or do we need to write our own library.

There are many services on the market. So let's take a look at common css animations and some of the promising SDKs.

CSS Animation

The easiest way to animate elements in the dom is to use CSS animations. This is sufficient for common standard webpages to animate UI elements. An css animation lets an element gradually change from one style to another without any usage of JS. But the animation can be controlled via JS (optional).

AnimeJS

AnimeJS is an javascript library and has a lot to offer when it comes to do performant and literally any kind of animations possible with svg and Javascript. It supports everything from simple graphic transformations like translations, rotation, scaling to complex things like SVG morphing in a very compact api. Animejs only manipulates the elements in the dom directly. But there are some react wrapper, such as react-anime, in the market to getting animejs to work with react apps. You can test animejs in the following window, by changing the slider value or clicking on the animate button.

React Spring

react-spring is a spring-physics based animation library that cover most of all UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces. This library represents a modern approach to animation. It is inspired by Christopher Chedeau's animated and Cheng Lou's react-motion. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use.

There are much more possible solutions to animate web elements on your website. This article should only give you an overview about animation in your webbrowser.

All of the presented animation libraries work for most of the webplatforms, but Audiocado has some special requirements, like the realtime editor, which present the animation and waveform changes in realtime. This means the user can scroll through the timeline and all components need to be controllable frame by frame by the timeline. And we do not need an animation system to animate the UI elements of our platform.

Furthermore Audiocado is a React Application, which works with a virtual dom to improve the webpage rendering. Most of the animation libraries work directly with the dom and do not support React.

At the end of this article we conclude to implement an own animation system on the basis of non-css-react to support our individual requirements of our realtime editor and our rendering system, since we want to provide the fastest and most reliable rendering system. For the next tasks we have a good knowledge base to start developing an animation system for Audiocado. We will add it to Audiocado as fast as we can.

Tags:
Copyright © 2020 Audiocado
Imprint
Subscribe to our blog
Find us on