Variations

Easing variations

Customize by overriding --hs-ease, --hs-ease-in, --hs-ease-out or --hs-ease-out-back or just create your own.

<template>
  <HumbleScroll animation="fade up" easing="ease-in" />
  <HumbleScroll animation="fade up" easing="ease-out" />
  <HumbleScroll animation="fade up" easing="ease-in-out" />
  <HumbleScroll animation="fade up" easing="ease-out-back" />
</template>

Size variations

Default variation for the translation amount on directional animations (up, down, left, right). Customize by overriding --hs-translate-ratio.

<template>
  <HumbleScroll animation="fade up" size="small" />
  <HumbleScroll animation="fade up" size="medium" />
  <HumbleScroll animation="fade up" /> <!-- default -->
  <HumbleScroll animation="fade up" size="large" />
  <HumbleScroll animation="fade up" size="extra-large" />
</template>

Speed variations

Default variation for animation durations (scales from --hs-duration).

<template>
  <HumbleScroll animation="fade up" speed="slow" />
  <HumbleScroll animation="fade up" speed="medium" />
  <HumbleScroll animation="fade up" /> <!-- default -->
  <HumbleScroll animation="fade up" speed="fast" />
  <HumbleScroll animation="fade up" speed="extra-fast" />
</template>
Table of Contents