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.
- 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.
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.