How to Use Transform and Transition

This feature is only available in Stackable Premium

What is Transform and Transition?

The Transform & Transition feature allows you to add more life to your site. Like the Hover States feature, you can add more advanced design options to your blocks upon hover.

For example, if you want your block to rotate upon hover, you can achieve that with this feature.

Or if you want it to shift to the side or scale up on upon hover, those are possible too. 

You can design your blocks with more options such as Translate X, Translate Y, Rotate, and Scale. 

If for example you want the effect to ease in after 1 second, you also have the option to adjust the Transition Duration and Transition Function of your blocks. 

How to Use Transform & Transition

When editing the block attributes in the inspector, navigate to the Advanced tab in the inspector, and open the Transform & Transition panel. From there, you will see the available options such as Transition Duration, Transition Function, Transform, and Transform Origin.

You will also see a small arrow icon beside the Transform options.

When you click on it, you will find the different states of the block. You can toggle between:

• Normal
• Hover
• Parent Hovered

The Hover option is when the mouse is hovered on the specific block, and the Parent Hovered option is when the mouse is hovered on a parent block's container.

Putting it Into Practice

Assuming that you've already populated your blocks and added certain designs using the Hover State feature, first select the Column block and navigate to the Advanced tab in the inspector where you will see the Transform & Transition panel.

You will see the different Transform options here, but in this example, select the Hover toggle and then set the Translate Y to -50. Afterwards, set the Transition Duration to 0.5 milliseconds to make the transition play longer, and set the Transition Function to Ease. 

To add more complexity, you can also adjust the Transform settings of the block's button by adjusting the settings with the Parent Hovered option. Make sure you select the Button block, and then under the Transform & Transition panel, choose the Parent Hovered option. Set the Transition Duration to 1 second, and then set the Scale to 1.1. 

Once you’re done, hit the save button and this is how it will look!

You’ll see how the different effects that were set blend together when you hover over the block. This allows you to showcase interactive elements in your page. 🎉