How To Create Custom Animation in BannerBoo

Do you know BannerBoo has a Custom animation feature that can be applied to the animation-in and animation-out sections of a layer on the editor's timeline?

Simply click on one of the areas and choose the custom parameter from the drop-down menu.


A window with the settings for your animation will appear.



The 'Easing' parameter determines the type of animation, or rather, the speed and smoothness of the animation.

As its name implies, the 'Opacity' parameter determines the degree of transparency of an object. If we set the value to 0, our object will disappear completely. By setting it to 40, we will make it 40% opaque.

The ‘Left’ parameter moves the animation from right to left, and it is measured in pixels. This parameter can be either positive or negative. When it is negative, the animation tends to move left to right.

The ‘Top’ parameter determines the vertical movement of our object. A positive value will cause the animation to move upwards. The negative value will cause the animation to move downwards. Combining these two values gives us a diagonal movement.


By using the 'Scale' parameter, you can scale the animation along the X and Y axes. Horizontal scaling is determined by the X-axis. The unit for this parameter is the object's current size.  As a result, values below '1' will decrease our object, and values above '1' will increase it. The Y-axis determines the vertical scale of an object. By setting the same value for both axes, we will get uniform scaling.

By using the 'Rotate' parameter, we can rotate our object along the X, Y, and Z axes. The direction of rotation of our object may be positive or negative depending on how it is interpreted. The vertical rotation is controlled by the X-axis in this parameter. The Y-axis controls horizontal rotation. The Z-axis controls circular rotation.

The 'Origin' parameter controls the alignment of the anchor point of our object. An anchor bump is a point that defines the axis of an object's animation. By default, it is at the center, which corresponds to 50 in X and Y.

Setting the rotation along the Z-axis will give us a better visual representation of the offset. If both values are set to 0, the point will be moved to the upper left corner of our object. If you set both values to 100, the point will appear in its lower right corner.

The same processes apply to animation-out.

Take advantage of BannerBoo’s smart animation today and contact us if you have any questions! 

(For more information watch the video