How to Use Row Scroll Animation

After you activated the plugin, a new element will become available in your WPBakery Page Builder's Backend Editor called Row Scroll Animation.

Create a Row Scroll Animation element and place it inside your Rows to apply an entrance and exit scroll animation to them. Only one Row Scroll Animation element can be placed inside a single row, adding multiple ones may lead to unexpected behavior.

IMPORTANT NOTES:

How It Works

Entrance animations play when your row is about to be shown on your screen while scrolling down. While exit animations play when your row is about to be hidden from your screen while scrolling up.

The entrance animations end when the top of the row reaches roughly the middle of the screen. While exit animations start when the bottom of the row reaches roughly the center of the screen. These may vary depending on the animation. Most notably the Cube effect. These locations can be varied within the options of each element.

---

Basic Usage

Please do note that before we proceed on this guide, the user also needs a basic knowledge on how to use WPBakery Page Builder and how to add Rows and Elements in a page or post. If you're not sure on how to do the following steps, it will be best to refer on the WPBakery Page Builder Basic Tutorial first: https://wpbakery.com/video-tutorials/

Step 1. Add New Page or Edit your existing page

Step 2. Go to Backend Editor

Step 3. In your Backend Editor, start creating your row content. Proceed on creating your page as usual: add background images, text, images depending on your preference.

Step 4. Once done, you can proceed adding Row Scroll Animation element to add your row animations that will trigger as you scroll through your page. You can customize various options such as Entrance and Exit Animations. Further instructions of what each setting does are included in the settings.

Step 4. Click on Save Changes. Preview or Publish your Page to view the changes.