Animation Overview

Make your ad design dynamic with adding some simple, or complex, animation. ResponsiveAds Fluid Designer Animation Timeline has a comprehensive list of features.

Timeline Keyframe Tweening

Keyframe Tweening, keyframing or “inbetweening” is the process of creating an animation — generating frames in between two keyframes.

Element Properties

You can animate your elements using next properties:

• Position - for a nice slide in or slide out of an element

• Size - to change the size and/or proportions of an element

• Rotation - to rotate an element for design purposes

• Opacity - to make an element appear or disappear

• Scale - to enlarge or reduce the size of an element saving its proportions

For the Video element there is an additional feature to synchronize the video with animation timeline. That is to trigger specific actions to happen in relation to the video playback.

Advanced Easing Options

Easing changes the look and feel of the animation. One option is to think of it as acceleration or deceleration. Easing affects the rate, or speed, of an animation.

An element can start its animation off quickly, then gradually slow to a halt. Or, it can start off slowly, then build up speed, and stop suddenly.

Using Easing options improve an impression on users of your ad animation and lead to more delightful user experience and higher view and engagement rates.

Premade Animations

ResponsiveAds Fluid Designer has a library of fast solutions — 32 ready-made animation presets for a fast result.

Looping

Another cool feature is looping. Once you’ve created one instance of your animation and you want it to keep looping — you can set it up in a one click.

Parallax

Parallax makes your animation work on scroll. Fluid Designer has several options of when animation should start and end for better results.

Copy Animation

To speed up your workflow, we created several Copy Animation features. You have several options to tailor your needs. Copy Animation:

• Element to Element — duplicate an animation for a logo to your CTA

• Size to Size — duplicate your element’s animation from one size to another size

• Save — create your own custom animation you want to be reusing and save it to the premade animations list

• Timeline — duplicate the whole Animation Timeline (animation of all elements) from one size to another size

Animation Length Adjusting

You have 10 seconds of animation timeline available that you can change as you need. For example, to make it 5 seconds or 30 seconds.

Events Triggering

Add events into your animation (for advanced animations). Link animation to the start of the video or other triggered events like click action, show or hide an element.

Examples

Here are just a few examples of what ResponsiveAds Animation Timeline is capable of.

Basic Animation

Advanced Animation