Kinetic Wrapper

Kinetic wrapper is a container type block to be used when you want to animate or add scroll parallax to any content. When you add a kinetic wrapper, it looks like the following by default:

The small icon on the top right helps you select the wrapper when you want to access it’s settings

It has some common settings like columns and containers as well. Such as background color, background image, border and border radius settings etc. But what’s interesting about this block is the Scroll Parallax and Transitions

Scroll Parallax:

When you want an element move on scroll, you can wrap it with kinetic wrapper and apply scroll parallax with vertical movement values in pixels.

Movement Distance:

You can enter positive and negative values. Higher numbers increases the duration of the movement on scroll.

Movement Speed:

Choosing fast and very fast increases the speed of movement on scroll.

Automatically add spacings:

If you know what you’re doing, you can disable this. But then you might need to assign some custom vertical padding and margin values to the wrapper so that it doesn’t look weird on your layout.

Following wrapper has -200px scroll parallax value, which means when it’s in the viewport, it will start moving on scroll until it reaches that 200px value.

This is a paragraph block inside a Kinetic Wrapper. You can have any blocks inside this wrapper and do amazing stuff!

Was this helpful to you?