ro:Kit Slide-In Animations

ro:Kit generates several slide-in animations out-of-the-box. These animations can be used to progressively reveal elements on first page load.

Each animation class has three speed variants slow, fast and regular. Moreover, animations can be applied in sequence to child elements by simply adding a single class (example .children-slide-down) to a parent element.

Slide-In Classes

  • .slide-[direction:text = up | down | left | right]-[?speed:text = fast | slow]-delay-[delay:number = 1 through 12] - slides and fades in an element with [delay]. Optional speed modifier may be added and omitting the modifier will run animation at default speed. An element with delay-1 will be shown first, delay-2 will fade-in right after delay-1. Delay times are absolute. Example: .slide-up-delay-1
  • .children-slide-[direction:text = up | down | left | right]-[?speed:text = fast | slow] - slides and fades in up to 12 child elements of an element in a delayed sequence. Optional speed modifier may be added and omitting the modifier will run animation at default speed. Example: .children-slide-down

SASS Variables

Variable Description Default Value Location
$animation-delay-steps Sets number of delay classes generated by ro:Kit 12 _variables.scss
$animation-base-length Sets base length of delay-1 animation 1s _variables.scss
$animation-fast-delay-multiplier Sets multiplier for fast animations. The lower the multiplier, the shorter the delays 0.25 _variables.scss
$animation-slow-delay-multiplier Sets multiplier for slow animations. The lower the multiplier, the shorter the delays 0.65 _variables.scss
$animation-delay-multiplier Sets multiplier for regular animations. The lower the multiplier, the shorter the delays 0.55 _variables.scss
$animation-translate-distance Sets distance of slide-in effect 10 rem _variables.scss

ro:Kit Shadow Animations

You can also animate text and box shadows in sequence with ro:Kit text shadow animations. Shadow animations work in similar fashion to slide-in animations. You only need to add a class to have the animation start on page load.

Shadow Animation Classes

  • .animate-[type:text = box | text]-shadow-[direction:text = up | down | left | right]-delay-[delay:number = 1 through 12] - animates box or text shadow on an element with [delay]. An element with delay-1 will be animated first, delay-2 will come in right after delay-1. Delay times are absolute. Example: .animate-text-shadow-top-right-delay-1-fast
  • .children-animate-[type:text = box | text]-[direction:text = up | down | left | right] - animates text or box shadow on up to 12 child elements of an element in a delayed sequence. Example: .children-animate-text-shadow-bottom-left-slow

SASS Variables

Variable Description Default Value Location
$shadow-animation-length Sets base length of shadow animations $animation-base-length = 1s _variables.scss