How to Enhance Your Content with Dynamic Visual Effects

TABLE OF CONTENTS

• Key Features and Benefits
• Customize a Button Hover Animation
• Frequently Asked Questions
• Related Articles

1. Dynamic Entrance and Hover Animations for Images and Buttons

   • Capture Attention: Apply entrance and hover animations to supported images and buttons.
     
     
   • Activate on Scroll: Entrance animations begin when supported elements come into view.
     
     
   • Live Preview: Preview animations directly in the builder while editing your content.
     
     
   • Customize Button Hover Effects: Select a Button and use Animations → Hover Animation to preview and customize built-in hover effects.

2. Extensive Animation Options

   • Select from a wide range of animation effects tailored to your content style and audience preferences. Options include:
     • Entrance Fade: Introduce elements with a subtle fade effect.
       
       
     • Entrance Slide: Elements sliding in from different directions.
       
       
     • Entrance Bounce: Add a fun, bouncing effect.
       
       
     • Entrance Rotate: Elements with a rotating entrance motion.
       
       
     • Entrance Zoom: Elements with a zoom entrance motion.
       
       
     • Hover Animations: Add interactive hover effects to Buttons. Preview an effect on the canvas before selecting it, then adjust supported settings such as duration, delay, easing, and effect-specific controls.
       
       
     • Loop Animations: Apply continuous animation effects to keep elements moving.

3. Seamless Integration

   • Easily apply and customize animations through the builder interface. Button hover animations are automatically disabled on touch devices and screens under 1024px to prevent unintended hover states.

1. Go to the funnel/website editor from the builder.
   
   
2. Select or add the image or button you wish to animate.
   
   
3. Navigate to the Animations tab in the sidebar.
   
   
4. Pick from various entrance, hover, and loop animations such as fade, slide, bounce, rotate, and zoom.
   
   
5. View the effect directly on the builder page.
   
   
6. Save your changes and publish the page.

Customize a Button Hover Animation

Button hover effects can be previewed and adjusted directly from the Animations tab, so you can create interactive Button states without custom CSS.

1. From the Funnel or Website Builder, select the Button you want to customize.
   
   
2. In the sidebar, select Animations.
   
   
3. Under Hover Animation, browse the available effects.
   
   
4. Hover over an effect to preview it on the selected Button.
   
   
5. Select the effect you want to use.
   
   
6. Use Adjust Animation to customize the available settings.

All supported hover effects include Duration, Delay, and Easing controls. Additional settings depend on the selected effect and can include Scale, Angle, Distance, Fill Color, Border Color, Border Thickness, Blur, or Spread.

Frequently Asked Questions

Q: Do Button hover animations work on mobile devices?

No. Button hover animations are automatically disabled on touch devices and screens under 1024px to prevent visitors from getting stuck in a hover state.

Q: Can I preview a hover effect before applying it?

Yes. Hover over an available effect in the Hover Animation panel to preview it on the selected Button before choosing it.

Q: Can I customize the timing of a Button hover animation?

Yes. Hover effects include Duration, Delay, and Easing controls. Additional customization options depend on the effect you select.

Q: Why do different hover effects show different adjustment options?

Each hover effect displays only the settings that apply to that effect. Depending on the selected effect, you may see controls such as Scale, Angle, Distance, Fill Color, Border Color, Border Thickness, Blur, or Spread.

Q: What happens if a Button has both an entrance animation and a hover animation?

The hover animation becomes active after the Button's entrance animation finishes.

Q: Do I need custom CSS to create Button hover effects?

No. Supported Button hover effects can be selected, previewed, and customized directly from the **Animations** tab without custom CSS.

Related Articles

• Animation Customizations in Funnels & Websites 
  
  
• Using the New Revamped Sidebar in Funnel & Website Builders 
  
  
• How to Add Entrance Animations to Sections, Rows & Columns
  
  
• How to Add Dynamic Animations to Text Elements