Transitions

When you want to animate an element, you can place it inside the Kinetic Wrapper and apply transition to it. You can apply following transitions with each having specific options:

  • Curtain opening (reveals content with a stripe animation)
  • Fade In
  • Fade In Vertical
  • Fade In Horizontal
  • Zoom In Vertical
  • Zoom In Horizontal
  • Flip In Vertical
  • Flip in Horizontal

Advanced Settings

By turning this on, you can enable the in depth transition options for each animation.

Transition Delay vs Transition Start Position

The difference between these 2 is, transition delay lets you define how long after the animation will start as son as it’s in the viewport, while transition start position determines at which position of the wrapper will the animation start after it’s in view.

So transition position is a nifty option especially when you have an element that’s already on the viewport when page loads, but hidden until it’s scrolled let’s say halfway through it’s height, which is 0.5

Following wrapper has the following transition properties (scroll back to start animation again):

Transition Type:

Flip in Vertical with 50px distance and 1.5 seconds duration

Transition Delay/Position

0 delay with 0.5 position

Easing Type:

Bounce EaseOut

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

Curtain Opening Example:

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?