Component

A quick example of using the HumbleScroll component.

<template>
  <HumbleScroll 
    animation="fade up"
    innerClass="h-full w-full flex justify-center items-center"
    :variables="{ delay : '2000ms' }"
    easing="ease-out-back"
    size="large"
    speed="slow"
    :once="true"
    element="section"
    innerElement="article"
  >
    <p>Your content here</p>
  </HumbleScroll>
</template>

Props

Pass props to the HumbleScroll component to customize it.

type HumbleProps = {
  animation?: string;
  innerClass?: string;
  variables?: HumbleVariables;
  easing?: HumbleEasing;
  size?: HumbleSize;
  speed?: HumbleSpeed;
  once?: boolean;
  element?: string;
  innerElement?: string;
}

Types

Types for the props.

export type HumbleVariables = {
  delay?: string;
  easing?: string;
  duration?: string;
  opacity?: string;
  translateY?: string;
  translateX?: string;
  scale?: number;
  rotate?: string;
  perspective?: string;
  rotateX?: string;
  rotateY?: string;
  skewX?: string;
  skewY?: string;
  translateRatio?: number;
  scaleRatio?: number;
  durationRatio?: number;
  translateXAmount?: string;
  translateYAmount?: string;
  flipXAmount?: string;
  flipYAmount?: string;
  perspectiveAmount?: string;
  staggerAmount?: string;
  skewAmount?: string;
  revealAmount?: string;
  blur?: string;
  blurAmount?: string;
}

type HumbleEasing = 'ease-in' | 'ease-out' | 'ease-in-out' | 'ease-out-back';

type HumbleSize = 'small' | 'medium' | 'large' | 'extra-large';

type HumbleSpeed = 'extra-slow' | 'slow' | 'fast' | 'extra-fast';

Structure

The HumbleScroll component is made up of 3 parts:

Outer div

The outer div is the container that wraps the inner div. It is this div that is tracked by the IntersectionObserver.

The inner div is the container that wraps the content. It is this div that is animated. The IntersectionObserver takes transformed values into account when calculating the intersection ratio. This means that we have to have two divs - one that is tracked and one that is animated.

Use the innerClass prop to add classes to the inner div.

Slot

The vue slot is where you put your content. Read more about how to use the slot.

Element and innerElement

Use the element and innerElement props to change the default div elements to something else.

<template>
  <HumbleScroll 
    element="section"
    innerElement="article"
  >
    <p>Your content here</p>
  </HumbleScroll>
</template>

Getting StartedOptions

ApiAnimations