Kinetic Wrapper is a single column container block with multifunctional features to enrich your content. While it shares some properties with Container Row block such as background, border, border radius etc, Kinetic Wrapper additionally has some fantastic features like scroll parallax and element transition.


Here are some Wrappers with Blocks in them:

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 blocks 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.

All you have to do is wrap it with a Kinetic Wrapper.


Bust Out Backgrounds to the Left or Right

Another one Bust the Dust!

This wrapper has a background bust out, which makes it look like a 2 column layout, even though it’s a one column. Parallax backgrounds and Scroll Parallax also work smoothly when combined with certain transitions.

Lorem Ipsum Dolor Sit Amet

Nullam placerat neque dolor, eu mollis massa accumsan in. Praesent eu ligula nunc. Morbi rutrum augue eros, fermentum dictum enim tempor dictum. Integer porta neque ac finibus iaculis. Aenean lacus urna, varius sit amet lectus non, vestibulum congue ante.

Things Get Messy? Just leave it to KiokenBlocks Auto Parallax and Transition Settings

KiokenBlocks encourages WordPress and Gutenberg users go crazy with options and settings for the sake of creativity. However, sometimes all those options might be frustrating and maybe you just want to fade in a paragraph.

No problem! Just keep the advanced settings off and Kiokenblocks has you covered. Either it’s scroll parallax or transition, when you don’t choose any options, Kinetic wrapper automagically generates spacings and animation for that block.


Kinetic Wrapper Settings

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

Scroll Parallax
  • 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)
  • Set easing effect and type
  • Select rewind(if the animation will repeat when scrolled back to it)
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)

Like What you See?

Get Bavarian WordPress Theme today and gain access to those amazing KiokenBlocks, since it’s currently only available with the theme!