Add Multiple Animations

  • Updated

You can add more than one animation on top of any component. You can choose from the following animation types: Move, Fade, Zoom, Pulse, and Rotate.

To add a new animation:

  1. In the Builder workspace, click the banner's component to add an animation.

  2. In the component settings panel, go to Animations.

  3. In the New Animation dropdown list, select an animation type. (You can add multiple animations.)

  4. In the Loop all animations, enter a number for how many times animations should loop. (Type a considerably large number if you need an animation to loop for a long time.)

  5. In Show all animations, specify if animations should be displayed on banner load or only after a specific action happens. (For example, when the banner expands, a button fades in.)

  6. Customize animation settings depending on their type:

    • If you select Move animation type, you can add a custom animation end position. Click Select custom end position and click on the banner where you want the animation to end. The component will move to that specific place.

    • If you select Fade animation type, you can select if the component should gradually appear (fade in) or disappear (fade out).

    • If you select Zoom animation type, you can select if the component should be zoomed in or zoomed out.

    • If you select Pulse animation, you can set the speed of pulsing, ranging from very slow to very fast, or set a custom pulse speed.

    • If you select Rotate animation, you can set the degree at which the component starts and finishes rotating.

  7. In the toolbar, click Save.

Was this article helpful?

How we can make it better?

Thank you for your feedback!