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!