fade-up
Fades in while moving upward from below.
On Load Animations
Animations that play when the page loads.
fade-down
Fades in while moving downward from above.
slide-left
Slides in from the right side.
slide-right
Slides in from the left side.
zoom-in
Scales up from smaller to normal size.
pop
Quick scale bounce effect on load.
<div ot-animate="fade-up">Content</div>
<div ot-animate="fade-down">Content</div>
<div ot-animate="slide-left">Content</div>
<div ot-animate="slide-right">Content</div>
<div ot-animate="zoom-in">Content</div>
<div ot-animate="pop">Content</div>On Hover Animations
Animations that play on mouse hover.
hover:fade-up
Fades in while moving upward on hover.
hover:fade-down
Fades in while moving downward on hover.
hover:slide-left
Slides left on hover from right.
hover:slide-right
Slides right on hover from left.
hover:zoom-in
Scales up on hover for zoom effect.
hover:pop
Quick bounce scale effect on hover.
<div ot-animate="hover:fade-up">Content</div>
<div ot-animate="hover:fade-down">Content</div>
<div ot-animate="hover:slide-left">Content</div>
<div ot-animate="hover:slide-right">Content</div>
<div ot-animate="hover:zoom-in">Content</div>
<div ot-animate="hover:pop">Content</div>In View Animations
Animations that play when element scrolls into viewport.
view:fade-up
Triggers when scrolled into view from below.
view:fade-down
Triggers when scrolled into view from above.
view:slide-left
Triggers slide in from right on scroll.
view:slide-right
Triggers slide in from left on scroll.
view:zoom-in
Triggers scale up effect when in viewport.
view:pop
Triggers bounce effect when in viewport.
<div ot-animate="view:fade-up">Content</div>
<div ot-animate="view:fade-down">Content</div>
<div ot-animate="view:slide-left">Content</div>
<div ot-animate="view:slide-right">Content</div>
<div ot-animate="view:zoom-in">Content</div>
<div ot-animate="view:pop">Content</div>