Animation Settings in the FlexiFunnels

How to Use Animation Settings in FlexiFunnels

FlexiFunnels allows you to add engaging animations to your elements, enhancing the visual appeal of your landing pages. These animations can be easily configured using the Animation Settings under the Personal Settings of any component in the editor.

 Where to Find Animation Settings

1. Open the Editor in your FlexiFunnels project.

2. Select the component (e.g., text, image, button) that you want to animate.

3. Go to the Personal Settings tab of the selected element.

4. Scroll down to find Animation Settings.
   
   

Types of Animations Available

1. On-Load Animation

This type of animation triggers when the page loads.

Once you select an on-load animation, you can customize the following options:

• Repeat: Choose how many times the animation should repeat.

• Delay (in seconds): Set the delay before the animation starts after the page loads.

• Duration: Define the speed of the animation (in seconds).

? Example: You can make a headline fade in 2 seconds after the page loads and repeat the animation twice.

2. On-Scroll Animation

This animation is triggered when a user scrolls to the component on the live page.

You can customize:

• Duration: Set how long the animation should take.

• Anchor Placement: Decide at which point (top, center, bottom of the screen) the animation should start when the element comes into view.

• Once: Toggle whether the animation should play only once or every time the user scrolls to it.

? Example: You can animate a testimonial block to slide in from the side when the user scrolls to that section.

Pro Tip:

Use animations sparingly to draw attention to key components like CTAs, offers, or form sections—without overwhelming your visitors.