Animations

Used by passing the animation prop to the HumbleScroll component.

Fade

Fades in the element.

<template>
  <HumbleScroll animation="fade" />
</template>

Directional

Customize by overriding --hs-translate-y-amount or --hs-translate-x-amount in your css or directly on the element with the variables prop. Works like a slide without fade applied.

<template>
  <HumbleScroll animation="up" />
  <HumbleScroll animation="down" />
  <HumbleScroll 
    animation="left" 
    :variables="{ 'translate-x-amount': '42px' }" 
  />
  <HumbleScroll 
    animation="right" 
    :variables="{ 'translate-y-amount': '20rem' }" 
  />
</template>

Zoom

Customize by overriding --hs-scale-ratio in your css or directly on the element as inline-style.

<template>
  <HumbleScroll animation="zoom-in" />
  <HumbleScroll 
    animation="zoom-out" 
    :variables="{ 'scale-ratio': 0.6 }" 
  />
</template>

Flip

Flip in any direction. Customize by overriding --hs-flip-x-amount and --hs-flip-y-amount.

<template>
  <HumbleScroll animation="flip-up" />
  <HumbleScroll animation="flip-down" />
  <HumbleScroll 
    animation="flip-left" 
    :variables="{ 'flip-x-amount': '180deg' }" 
  />
  <HumbleScroll 
    animation="flip-right" 
    :variables="{ 'flip-y-amount': '-180deg' }" 
  />
</template>

Skew

Combine with blur to make them feel blazingly fast. Customize by overriding --hs-skew-amount.

<template>
  <HumbleScroll animation="skew-up" />
  <HumbleScroll animation="skew-down" />
  <HumbleScroll animation="skew-left" />
  <HumbleScroll 
    animation="skew-right" 
    :variables="{ 'skew-amount': '30deg' }" 
  />
</template>

Reveal

Parent has overflow hidden and child slides from 100% to 0. Cusomize by overriding --hs-reveal-amount.

<template>
  <HumbleScroll animation="reveal-up" />
  <HumbleScroll animation="reveal-down" />
  <HumbleScroll animation="reveal-left" />
  <HumbleScroll 
    animation="reveal-right" 
    :variables="{ 'reveal-amount': '50%' }" 
  />
</template>

Blur

Who doesn't like motion blur? Customize by overriding --hs-blur on an element.

<template>
  <HumbleScroll animation="blur" />
  <HumbleScroll 
    animation="blur" 
    :variables="{ 'blur-amount': '40px' }" 
  />
</template>

Run once

Ensure the animation only runs once - even with repeat and mirror enabled.

<template>
  <HumbleScroll animation="fade up" :once="true" />
</template>

Responsive

In this responsive age developers need the ability to animate differently based on screen sizes. Use the tailwind prefix before animations to apply a media query.

<template>
  <HumbleScroll animation="sm:fade lg:up" />
  <HumbleScroll animation="md:fade xl:down" />
  <HumbleScroll animation="lg:fade sm:left" />
  <HumbleScroll animation="xl:fade md:right" />
</template>

Combine

Combine animations inside the animation prop (space separated).

<template>
  <HumbleScroll animation="fade up" speed="slow" />
  <HumbleScroll animation="fade up zoom-in" size="large" />
  <HumbleScroll animation="fade right flip-left blur" />
  <HumbleScroll animation="skew-right fade right blur" speed="fast" easing="ease-out-back" />
</template>

ApiComponent

ApiVariations