Porto allows you to apply smooth animation effects to almost any page element. These animations trigger when the element becomes visible during scrolling, helping you create more engaging and dynamic layouts.
Adding Animation in WPBakery (Visual Composer)
Method 1: Use WPBakery Elements with Built-In Animation Options
Many WPBakery elements include built-in animation settings. These appear in the element's Design Options or Animation tab.
- Supported Elements Include:
Row, Column, Custom Heading, Button, Single Image, Most Porto Elements (e.g., Porto Icon, Porto Block, Porto Carousel)
- Available Animation Settings
- Animation Type
Choose a CSS3 animation style (e.g., fadeIn, slideInUp, zoomIn). - Animation Duration (in milliseconds)
Controls how long the animation effect lasts.
Example:1000(1 second) - Animation Delay (in milliseconds)
Delays the animation start after the element becomes visible.
Example:300(0.3 seconds)
- When to Use This Method
Use this method when the target element already includes animation settings built into its WPBakery panel.
Method 2: Use the Porto Animation Element (for Elements Without Animation Controls)
If an element does not include animation settings, you can wrap it with the Porto Animation element.
- How to Use
- Add a Porto Animation element.
- Place your element inside the animation wrapper.
- Configure the animation effect (type, duration, delay).
- When to Use This Method
Use this method when:
- The element does not support animation fields
- You want custom animation control over grouped elements
- You need consistent animation styling across multiple blocks
Adding Animation in Elementor
Elementor provides animation settings for most widgets and sections.
- How to Access Motion Effects
- Select any widget, column, or section in Elementor.
- Open the Advanced tab.
- Open the Motion Effects panel.
- Available Animation Settings
- Entrance Animation - Choose an animation such as fadeIn, slideInUp, bounceIn, zoomIn, etc.
- Animation Duration - Controls animation speed:
- Normal
- Fast
- Slow
- Custom duration (available in paid versions)
- Animation Delay - Add a delay before the motion starts.
- When to Use This Method
Use Elementor’s native animation options for most widgets and layout structures.
Best Practices
- Use subtle animations to improve UX without distracting the user.
- Avoid applying multiple animations to nested elements (parent + child) as this may cause overlapping effects.
- Use delays strategically to create smooth staggered animations.
- Keep performance in mind—large pages with too many animations may load or scroll slower.
