Starter Animation- Image

Make sure Animation Addons is installed and activated on your WordPress site before you start.   

Requirement 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

How To Activate Starter Animation 

• Unlike other extensions, you do not need to activate Starter Animation separately. Once you install Animation Addons, it will be activated by default.

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

Reveal 

Reveal Animation makes an image gradually appear from a specific direction when it enters the viewport.

Duration (ms): Controls how long the reveal animation takes to complete. In this example, the duration is set to 1000 ms. However, you can set any value according to your design needs. 

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

Easing: Controls how the animation accelerates and slows during the reveal motion.

Common Easing Types: 

• Ease Default → Uses the default smooth animation curve.
• Linear → Constant speed.
• Ease In → Starts slowly.
• Ease Out → Slows down at the end.
• Ease In Out → Smooth start and end.
• Smooth Cubic → Soft and smooth transition.
• Elastic Feel → Spring-like motion effect.

In this example, Ease In Out is selected. However, you can explore other options as well.

Direction: Control the direction from which the image appears.

Common directions include:

• Bottom → Top: Image slides upward.
• Top → Bottom: Image slides downward.
• Left → Right: Image slides from the left side.
• Right → Left: Image slides from the right side.
• Center Expand: Image reveals outward from the center in all directions.

In this example, Center Expand is selected. However, you can choose any option according to your preference.

Enable Fade: Controls whether the image also fades in while revealing. In this example, the option is disabled, but you can choose either option.

Repeat Animation: Controls whether the reveal animation plays again when the image re-enters the viewport. In this example, Play Once is selected. However, you can choose Every Time based on your design needs.

Final Output of Revel:

Scale 

Scale Animation makes an image zoom in or zoom out smoothly when it appears on the screen.

Duration (ms): Controls how long the scaling animation takes to complete. In this example, the duration is set to 600 ms. However, you can adjust it to any value as needed. 

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0 ms. However, you can set it to any value you prefer.

Easing: Controls how the animation speed changes during the scaling effect.

Common easing types:

• Ease Default → Default smooth curve
• Linear → Constant speed
• Ease In → Starts slowly
• Ease Out → Slows at the end
• Ease In Out → Smooth start and end
• Smooth Cubic → Soft transition
• Elastic Feel → Spring-like motion

In this example, ‘Ease Out’ is selected. However, you can choose any option according to your preference.

Start Scale: Controls the starting size of the image before the animation begins. In this example, the start scale is set to 0.08. However, you can use any value based on your preference. 

End Scale: Control the final size of the image after the animation finishes. In this example, the end scale is set to 1. However, you can set it to any value according to your preference.

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

Common options include:

• Center → zoom occurs from the middle
  
• Top → zoom expands downward
  
• Bottom → zoom expands upward
  
• Left → zoom expands from the left
  
• Right → zoom expands from the right

In this example, Center is selected. However, you can choose any option based on your design needs.

Animate Opacity: Controls whether the image also fades in while scaling. If its: 

• Enable: The image zooms and fades in simultaneously.
• Disable: Only the zoom effect occurs.

In this example, the setting is enabled.

Repeat Animation: Controls whether the animation replays when the image re-enters the viewport. Available options include Play Once and Every Time. In this example, Play Once is used. 

Final Output of Scale:

Slide 

Slide Animation makes an image move into its position from a specific direction when it becomes visible on the screen.

Duration (ms): Sets the duration of the slide animation. Here, the value is 800 ms, though you can configure it to any value.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0, but you can adjust it to any value.

Easing: Controls the speed change during the scaling animation.

Common Easing Types: 

• Ease Default → Standard smooth motion
• Linear → Steady speed
• Ease In → Slow start
• Ease Out → Slow end
• Ease In Out → Smooth start and end
• Smooth Cubic → Soft transition
• Elastic Feel → Spring-like effect

In this example, Ease Out is selected. However, you can choose any option.

Direction: Controls the direction from which the image slides into view.

Common options:

• Bottom → Top: image slides upward
  
• Top → Bottom:  image slides downward
  
• Left → Right: image slides from the left side
  
• Right → Left: image slides from the right side

In this example, Left → Right is selected, but you can select any direction as needed.

Distance: Controls how far the image begins from its final position before sliding. In this example, the distance is set to 60 px. However, you can set any value according to your requirements. 

Repeat Animation: Controls whether the slide animation replays when the image re-enters the viewport. Two options are available: Play Once and Every Time. In this example, Play Once is selected.

Final Output of the Slide:

Skew Reveal

Skew Reveal Animation reveals an image with a tilted motion combined with movement.

Duration (ms): Controls how long the skew reveal animation takes to complete. In this example, the duration is set to 1000 ms. However, you can adjust it to any value.

Delay(ms): Sets the delay before the animation begins. Here, it is set to 0.2 ms, but you can modify it as needed.

Easing: Adjusts how the animation speed varies throughout the scaling effect.

Common easing types:

• Ease Default → Smooth standard motion
• Linear → Even, constant speed
• Ease In → Gradual acceleration at the start
• Ease Out → Gradual deceleration at the end
• Ease In Out → Gentle start and finish
• Smooth Cubic → Soft cubic transition
• Elastic Feel → Bouncy, spring-style motion

In this example, ‘Ease In’ is selected. However, you can choose any option based on your design needs.

Skew Angle: Control how much the image is tilted at the start of the animation. In this example, the angle is set to 10 degrees, but you can adjust it to any value.

Translate Distance: Controls how far the image begins from its final position before moving into place. In this example, the translate distance is set to 50 px. However, you can adjust it to any value as needed. 

Repeat Animation: Controls whether the animation replays when the image re-enters the viewport. Two options are available: Play Once and Every Time. In this example, Play Once is selected, but you can choose either option.

Final Output Of Skew Reveal:

Flip 

Flip Animation makes an image rotate in 3D space like a flipping card before settling into its normal position when it appears on the screen.

Duration (ms): Controls how long the flip animation takes to complete. In this example, the duration is set to 1000 ms. However, you can set it to 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.4 ms. However, you can adjust it to any value based on your design needs.

Easing: Controls how the animation speed changes during the scaling effect.

Common easing types:

• Ease Default → Smooth default motion
• Linear → Constant speed
• Ease In → Slow start
• Ease Out → Slow finish
• Ease In Out → Smooth start and end
• Smooth Cubic → Soft transition
• Elastic Feel → Spring-like motion

In this example, Ease In is selected, but you can select any available option.

Flip Direction: Controls the axis on which the image rotates. Two options are available: Flip X and Flip Y. Choosing Flip X rotates the image horizontally, while Flip Y rotates it vertically.

In this example, Flip X is selected, but you can choose either option.

Flip Angle: Controls how much the image rotates during the animation. In this example, the flip angle is set to 180 degrees. However, you can adjust it to any value. 

Perspective: Controls the depth of the 3D effect. In this example, the perspective is set to 800 px, but you can adjust it to any value.  

Repeat Animation: Controls whether the animation plays again when the image re-enters the viewport. Two options are available: Play Once and Every Time. In this example, Play Once is selected.

Final Output of Flip