Kinetic Wrapper Block

Kinetic Wrapper shares some properties with Container Row block such as background, border, border radius etc, Kinetic Wrapper additionally has some fantastic features like scroll parallax(pro) and element transition.

I’m an ImageBox Block

And I Flip In

All 3 of these boxes both animate and scroll parallax. Because they’re wrapped in Kinetic Wrappers, moving. And that’s why we call it the Kinetic Wrapper!

Another ImageBox Block

Flipping Up

look ma!

I’m Flying!

Kinetic Wrapper transitions are not just a css animation library. They’re rewindable, and fully customizable. You can leave simple settings, or turn on advanced options for easings, distance, when to kick in and how far to kick in and so much more. Even more options are added on each block update.

When you wrap a block with a Kinetic Wrapper, that block gains features no other Gutenberg block ever has. Let’s say you have an image block like the one on the left, and you want to add dynamics to it on scroll or have padding, margin, custom color or transitional properties.

Kinetic Wrapper Settings

Each Kinetic Wrapper has Scroll Parallax(pro) and Transition properties of which almost every detail can be customized.

Scroll Parallax(pro)

• Adjust distance (how far it will vertically travel)
• Adjust movement speed (how fast it will travel to it’s destination on scroll)
• Ability to disable auto spacings to adjust margin and padding for a more customized scroll feel.

Transition

• Select the transition type from a list of options (flip in, fade in, zoom in, curtain, all with vertical or horizontal choices)
• Adjust transition duration
• Adjust distance based on transition option (available for all except curtain type).
• Set delay (how late the transition will start)
• Set position (at which wrapper position on scroll transition will fire – pro)
• Set easing effect and type – pro
• Select rewind(if the animation will repeat when scrolled back to it – pro)

Other Settings

• Margin and padding options with responsive settings (tablet and mobile view)
• Background options (same options available with Container Row block)
• Border and border radius settings for each corner
• Background bust out (ability to push background of the wrapper half size of the screen)