How to Use Starter Animation in BricksFly

Starter Animation lets you add ready-made animation effects to Bricks elements directly from the Bricks builder. With BricksFly, you can apply animations to text, images, and other elements using simple controls like duration, delay, easing, and repeat settings.

Requirement 

Make sure you have installed

• Bricks Theme 
• BricksFly (Free Version)  

Note: You will find the Starter Animation Extension in the Bricks builder editor panel under the Content tab on the left side of the screen. To apply animation, simply click the element you want to animate.

Available Starter Animation Effects 

After clicking Starter Animation, you’ll see a list of available animation effects. These include:

• None
• Reveal
• Scale
• Slide
• Skew Reveal
• Flip
• Glow Pulse (Text)
• Typewriter (Text)
• Mask Wipe (Text)
• Water Wave (Text)
• Background Clip (Text)
• Character Animation (Text)

Image Effect of Starter Animation 

Reveal 

Reveal Animation gradually shows an element when it enters the viewport (usually on scroll), creating a smooth and dynamic entrance effect.

Durations (ms): Controls how long the animation takes to complete. You can set any value based on your preference. In this example, the duration is set to 1000ms to create a slow, dramatic reveal.

Delay (ms): Controls how long the animation waits before it starts. You can set any value based on your design needs. In this example, the delay is set to 0 ms.

Easing: Controls the motion curve of the animation (how it accelerates and slows). 

Common types:

• Linear → constant speed
  
• Ease in → starts slow
  
• Ease out → ends slow
  
• Ease in Out → smooth start and end
  
• Smooth cubic → very smooth and natural acceleration and deceleration
  
• Elastic Feel → creates a spring-like effect that slightly overshoots and bounces back before settling

In this example, Ease in Out is selected. However, you can choose any type based on your preference.

Direction: Controls where the element comes from when revealing.

You will get options like: 

• Bottom → Top
• Top → Bottom
• Left → Right
• Right → Left
• Center → Expand

In this example, Left → Right is selected. However, you can choose any option depending on your needs.

Enable Fade: Adds opacity to the animation. In this example, the option is left disabled. However, you can enable it if you want, based on your preference.

Repeat Animation: Controls whether the animation runs only once or plays again when the element re-enters the viewport. In this example, Default is chosen. However, you can select either option based on your style needs.  

Enable On Editor: Turn on the Enable on Editor option to show the Animation Play button in the editor. 

Final Output of Reveal: 

Lastly, click the Replay Animation “Play” button to see the result.

Scale

Scale Animation makes an element grow or shrink smoothly.

Durations (ms): Controls how long the animation takes to finish. You can change the value based on what you like. In this example, the duration is set to 1000 ms to make the Scale slow and dramatic.

Delay (ms): Sets the waiting time before the animation begins. You can adjust the value as needed. In this example, the delay is 0 ms.

Easing: Controls animation speed behavior (see Easing Guide above). In this example, elastic is selected. 

Start Scale: This sets the starting size of the element before the animation begins. You can set it to any value based on your needs. However, in this example, the value is set to 0.08. 

End Scale: This controls the size of the element after the animation finishes. In this example, the value is set to 1. However, you can choose any value based on your preference.

Scale Form: Controls the origin point from where the scaling happens.

Common options:

• Center → scales from the middle
  
• Top → grows downward
  
• Bottom → grows upward
  
• Left → grows from left side
  
• Right → grows from right side

In this example, Right is selected. However, you can choose any option based on your preference.

Repeat Animation: In this example, the Repeat option is set to Default. You can select a different option if needed.

Enable On Editor: Control animation play button. 

Final Output of Scale: 

Lastly, click the Replay Animation “Play” button to see the result.

Slide 

Slide Animation makes an element move into its position from a specific direction.

Duration (ms): Sets how long the animation runs before it finishes. You can adjust the value as needed. In this example, the duration is set to 1000 ms for a slower slide effect.

Delay (ms): Controls the pause before the animation starts. You can set any value you prefer. In this example, the delay is 10 ms.

Easing: Controls how the motion accelerates and slows during the slide. In this example, Ease In is selected. 

Direction: Controls where the element slides from. 

You will find options like: 

Bottom → Top: element slides upward

Top → Bottom: element slides downward

Left → Right:  element slides in from the left

Right → Left: element slides in from the right

In this example, Top → Bottom is selected. However, you can choose any option based on your style needs.

Distance (Px): Controls how far the element moves before reaching its final position. In this example, the value is set to 60px. However, you can set any pixel value based on your needs.

Repeat Animation: Default option is selected here. 

Enable on Editor: Displays the animation play button in the editor. 

Final Output of Slide

Skew Reveal 

Skew Reveal Animation shows an element with a tilted motion as it moves into place.

Duration (ms): Controls how long the animation takes to finish.  In this example, the duration is 1000 ms, but you can modify it based on your design.

Delay (ms): Controls how long the animation waits before starting. Here, the delay value is set to 10 ms. However, you can set any value you prefer.

Easing: Controls how the animation speeds up and slows down during the slide effect. In this example, Ease In is selected. 

Skew Angle: Controls how much the element is tilted at the start of the animation. In this example, the value is set to 80, so the element starts tilted and returns to normal (0°). However, you can set any value based on your preference.

Translate Distance: Controls how far the element moves before reaching its final position. In this example, the value is set to 50px. However, you can choose any value based on your preference. 

Repeat Animation: Controls whether the animation plays again when the element re-enters the viewport. In this example, default is selected. 

Enable on Editor: Shows the animation play button in the editor.

Final Output of Skew Reveal:

Flip 

Flip Animation makes an element rotate like a card flipping in 3D space before settling into its normal position.

Duration (ms): Controls how long the flip animation takes to finish. In this example, the duration is set to 600 ms. However, you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.02 ms. However, you can set any value based on your style needs.

Easing: Controls how the animation speed changes during the slide.In this example, the type is set to Ease Out. 

Flip Direction: Controls the axis on which the element flips. It offers two options: Flip X and Flip Y. Flip X animates the element horizontally, while Flip Y animates it vertically. In this example X is selected. 

Flip Angle: Controls how much the element rotates before reaching its final position. In this example, flip angle value is set to 180 degree, however, you can set any value according to your style needs. 

Perspective: Controls the depth of the 3D effect. Here, the value is set to 800px, but you can choose any value based on your preference.

Repeat Animation: Controls whether the flip animation plays again when the element re-enters the viewport. In this example, Play Once is selected. However, you can choose either option based on your preference. 

Enable on Editor: Displays the Animation Play button in the editor panel. 

Final Output of Flip X: 

Final Output of Flip Y:

Text Effect of Starter Animation 

Glow Plus 

The Glow Plus animation makes text shine with a glowing light effect.

Duration (ms): Controls how long one glow animation cycle takes. In this example, the duration is set to 600. However, you can set any value based on your preference. 

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.02 ms. However, you can set any value based on your design needs.

Easing: Controls how the animation starts and ends. See the Easing Guide above to learn about each easing option. 

Glow Color: Choose any color you want to apply to the text for the glowing light effect. In this example, lime green is selected.

Glow Size: Controls how large or intense the glow appears. Set the glow size based on your style needs. In this example, the value is set to 20.

Animation Loop: Controls whether the glow effect repeats continuously. You will find two options: Play Once and Infinite.

Repeat Animation: Controls whether the glow animation plays again when the element re-enters the viewport. In this example, Play once is selected. 

Enable on Editor: Makes the Animation Play button available in the editor. 

Final Output of Glow Plus : 

TypeWriter 

Type Writer Animation makes text appear one character at a time, just like typing on a keyboard.

Duration (ms): Controls how long the typing animation takes to complete. In this example, the duration is set to 1000, but you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.04 ms. However, you can set any value based on your preference.

Easing: Controls the way the animation’s speed changes during the scaling effect. In this example, Ease In is selected. 

Repeat Animation: Controls whether the typing animation replays when the element re-enters the viewport. The Default option is selected. 

Enable on Editor: Adds the Animation Play button to the editor panel. 

Final Output of Typewriter:

Mask Wipe

Mask Wipe Animation reveals text using a colored overlay that slides across the text like a wipe effect.

Duration (ms): Controls how long the wipe animation takes to complete. In this example, the duration is set to 800 ms. However, you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.04 ms. However, you can set any value based on your preference.

Easing: Controls the animation speed during the scaling effect. In this example, Ease In is selected as the easing type. 

Mask Color: Controls the color of the covering mask that moves across the text. Choose any color based on your style needs. In this example, black is selected.

Repeat Animation: Controls whether the wipe animation plays again when the element re-enters the viewport. You will find two options: Play Once and Every Time. In this example, Play Once is selected.

Enable on Editor: Allows animation preview directly from the editor.

Final Output of Mask Wipe:

Water Wave 

Water Wave Animation fills the text with a moving wave effect, similar to water flowing inside the letters.

Duration (ms): Controls how long the wave animation takes to complete one movement cycle. In this example, the duration is set to 800 ms. However, you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. Here, the delay is set to 0.04 . However, you can set any value based on your preference. 

Easing: Adjusts how the animation’s speed changes while the scaling effect is applied.

In this example, Ease In Out is selected as the easing type. 

Wave Fill Color: Controls the color of the wave that fills the text. In this example, Turquoise color is selected. However, you can choose any color based on your style needs.  

Repeat Animation: Controls whether the wave animation replays when the element re-enters the viewport. In this example, the Default option is selected. 

Enable on Editor: Allows animation preview directly from the editor.

Final Output Of Water Wave:

Background Clip Text 

Background Clip Text Animation fills the text with a background image or pattern that is clipped inside the letters.

Duration (ms): Controls how long the entrance animation takes when the text first appears. In this example, the duration is set to 800 ms, however, you can set any value according to your choice. 

Delay (ms): Controls how long the animation waits before starting. In this example, 0.02 is chosen. 

Easing: Controls how the animation speed changes during the scaling effect. In this example, Ease In Out is selected. 

Background Image: Sets the image used to fill the text. Choose any image you want to use. 

Under Background Image, you’ll find the Dynamic Data and Custom URL options. 

Dynamic Data: Uses a dynamic image source provided by Elementor, such as a featured image or custom field.

Custom URL: Lets you use an image by entering its direct URL instead of selecting one from the Media Library.

Animation Speed (seconds): Controls how fast the background image moves inside the text. In this example, the animation speed is set to 30. However, you can set any value based on your design needs. 

Repeat Animation: This example uses the Default option.  

Enable On Editor: Enables the animation preview feature in the editor.

Final Output of Background Clip Text: 

Character Animation 

Character Animation applies animation to each letter individually instead of the whole text block.

Duration (ms): Controls how long each character’s animation takes to complete. In this example, the duration is set to 600 ms. However, you can set any value based on your design needs.

Delay (ms): Controls the delay between each character animation. In this example, the delay is set to 50 ms, but you can adjust it as needed.

Easing: Controls how the animation accelerates and slows. In this example, ease out is selected. 

Character Preset: Controls the animation type applied to each letter. You will find options such as Revolve Scale, Ball Drop, Side Hustle, Resolve Drop, Drop Vanish, and Twister.

Note: You can adjust settings such as Translate X, Translate Y, and Rotate for each Character Preset to create different animation effects. There are no fixed values, so feel free to experiment and choose the settings that best match your design. 

Enable on Editor: Allows animation preview directly from the editor.

Repeat Animation: Controls whether the animation runs again when the text re-enters the viewport. In this example, Default is selected.

Enable on Editor: Lets you preview animations directly in the editor.