How to Use Row Scroll Animation

How to Use the Row Scroll Animation

This is a simple guide for beginner users of 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:
  • Row animations are turned off for mobile devices since scroll events do not fire as expected in mobile browsers.
  • Entrance row animations are not advisable for rows that are near the top of your page.
  • Exit row animations are not advisable for rows that are near the end of your page.

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.


Row Scroll Animations Demo

You can access our Demo Setup and see samples and how to do them at http://demos2.gambit.ph/rowscroll/

Clicking on the Launch Demo will take you to the backend setup.