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