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.
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 |
Variable | Description | Default Value | Location |
---|---|---|---|
$shadow-animation-length | Sets base length of shadow animations | $animation-base-length = 1s | _variables.scss |