How to Use Motion Effects

This feature is only available in Stackable Premium

What are Motion Effects

The Motion Effects feature allows you to add more life to your site by animating your blocks or the contents of your blocks. You can either animate only your parent blocks, or animate your nested blocks together with your parent blocks to achieve greater effects.

There are Entrance Animations and Scroll Animations options. 

Entrance Animations

You can specify Entrance Animations that trigger when the block comes into view. You can also set different animations for different devices.

Entrance animations only place once when the block would become visible, the animation will not play again when the block goes out and in of your view.

Just select which parent block or nested block you want to animate, and then navigate to the Advanced Tab in the inspector.

Click on the Motion Effects tab to see which type of animation you want: Entrance or Scroll. Click on Entrance Animation and a dropdown with Start Position settings will appear such as Horizontal, Vertical, Scale, and Rotate.

Note that you can click on the device icon to set different animations depending on the device.

You also have the option to adjust the Entrance Animation Speed and Entrance Animation Delay.

After setting up your Entrance Animations, you can see the full effect in the frontend when you preview your site.

Scroll Animations

You can specify Scroll Animations that change the look of the block as you scroll and the block goes in or out of view. This will work for other devices as well such as tablet or mobile, however you can't set different animations depending on the device.

Just select which parent block or nested block you want to animate, and then navigate to the Advanced Tab in the inspector.

Click on the Motion Effects tab to see which type of animation you want: Entrance or Scroll. Click on Scroll Animation and a dropdown with Smoothen Scroll Animation and Use 3D Transforms settings will appear.

You also have the option to choose which Entrance Animation and/or Exit Animation settings you want to apply to your blocks such as Opacity, Scale, Blur, and more.

After setting up your Scroll Animations, you can see the full effect in the frontend when you preview your site.