WPBakery’s CSS animations use a renamed copy of the Waypoints script, so elements animate as they scroll into view. Total replaces WPBakery’s animation script with its own version, so you can change when the animations start.
When do animations start?
Animations start based on a setting called the offset, which is how far down the screen an element’s top edge has to reach before it animates. The default is 85%, so an element animates once it has scrolled about 15% of the screen height into view. This makes sure the animation is actually seen. If it started the moment the element appeared at the bottom of the screen, most of it could play where it’s easy to miss.
- Higher values (up to 100%) make animations start sooner.
- Lower values make them start later.
Because the offset is a percentage of the screen height, it behaves the same on phones and desktops.
Change the offset for all elements
// Modify the WPBakery CSS animation waypoint settings.
add_filter( 'wpex_vc_waypoints_settings', function( $settings ) {
$settings['offset'] = '100%'; // Default is 85%.
return $settings;
} );The same filter has a delay setting (default 300). It sets the time in milliseconds between each item in an “animate in sequence” group.
Change the offset for a single element
Since Total 6.9 you can set the offset on individual elements without any code. Add the class wpb-animate-at-{number} to the element’s “Extra class name” field, where the number is a percentage of the screen height. For example:
wpb-animate-at-100: animates as soon as the element comes into view.wpb-animate-at-95: animates slightly sooner than the default.
The best value depends on the element. 85% works well for large sections, while smaller elements often look better starting sooner. For elements inside an “animate in sequence” group, add the class to each animated element, not to the group.