Scrolled Animation WordPress Theme

It is easy to define a scrolled animation by several clicks for all modules(except the Group module). You could define the transition effect, duration, ease, replay, position of animation fired.

To find the options, please enter the BM Content builder:

Please click the pencil icon to edit an existed module(or add a new module):

You will see the module editing panel, click “Advanced Settings”:

You will see the “Scroll in Animation” button.

Please activate it, you will see more options:

Animation Effect

There are 25 options for the transition effect: Fade In, Move from Left, Move from Right, Move from Top, Move from Bottom, Move from Left(short), Move from Right(short), Move from Top(short), Move from Bottom(short), Move from Left(long), Move from Right(long), Move from Top(long), Move from Bottom(long), Zoom In, Zoom Out, Zoom Mask, Zoom Mask2, From Left Mask, From Right Mask, From Top Mask, From Bottom Mask, Flip X, Flip Y, Rotate In DownLeft, Rotate In DownRight. It is the basic option to create a scrolled animation. Please check the video guide:

How to create a scrolled animation quickly

From version 3.6, the 4 Bounce from left(right, top, bottom) options were removed. But you could define the bounce affect by the Ease option(the next section).

Duration and Eases

Please enter a number to define the transition duration, the unit is second. The default is 0.5.

There are 30+ Ease options includes: Power(in or out), Elastic(in or out), Bounce(in or out), etc. Normally, you could choose a Power option.

You could define different styles of the animation by the Ease option.

Position of Animation starts

This option is to define where the animation starts to play. You can define the percentage of window height from the top edge of the window. The default is 80%(of window height from the top edge fo the window).

Animation Replay

If you want the module to play again when it enters back the window again, please enable this option.

Animation for sub-items

For the modules(Grid, Masonry Grid, Social, Button) which have sub-items, the sub-items animation will play staggered automatically.

Was this article helpful?

Related Articles