Effects

Create unique effects to bring your WordPress website to life! Our Block Styles plugin offers fun animation and transition effects to engage your website visitors with your content.

Animations #

Step 1: Select an animation name from the drop-down menu.

Block Styles animation drop-down menu.

Step 2: Set a duration for how long you’d like your animation to run. Default duration is in seconds but this can be changed to miliseconds.

Block Styles effects menu.

Step 3: After you select a duration, you will be presented with several more options:

  • Timing Function
  • Delay
  • Iteration Count
  • Direction

Timing Function #

Select a timing function from the drop-down menu.

Block Styles animation timing fucnction drop-down menu.

Delay #

Set a delay for your animation sequence to start. Timing is in seconds by default.

Iteration Count #

Customize the iteration count of your animation.

Direction #

Select a direction from the drop-down menu.

Block Styles animation direction deop-down menu.

Transition CSS #

Input your own custom CSS in the CSS Property box.

Block Styles Transition CSS Property box.

Transform Style #

Function #

Rotate #

When selecting the rotate function, you will need to adjust the angle of rotation. You can use postive values (+) and negative values (-).

Block Styles rotate transition function.

Scale #

Adjust the scale to move the block text to the left or the right. The default is 1.

Block Styles scale transition option.

Skew #

Customize the “skew” of a WordPress block by adjusting the angle through inputting a number of using the dial.

Block Styles transform style, skew selection.

Translate #

Adjust the length of the translate function by inputting an amount. Default measurement is pixels but this can be changed to %, EM, REM, VW, & VH.

Block Styles translate function.

Masks #

Shape #

  • Diamond
  • Flower Art
  • Cameillia Flower
  • Geometric
  • Hexagon
  • Heart
  • Moon
  • Star
  • Sun
  • Wave
  • Custom
Block Styles masks and shape selection drop-down menu.

To start over, click the Clear All button to reset the effects settings.


Interested in purchasing Block Styles? Click here to buy the plugin.

Purchase a membership to unlock all of our products!

  • Block Styles
  • Dynamic Content
  • Styles Library
  • Gesso Theme Support

Leave a Reply

Your email address will not be published.