CSS Variables

Default variables

All Custom properties that can be customized. The default values are shown below.

:root {
  --hs-delay: 0ms;
  --hs-easing: var(--hs-ease-out);
  --hs-duration: 600ms;
  --hs-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hs-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --hs-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hs-opacity: 1;
  --hs-translate-y: 0;
  --hs-translate-x: 0;
  --hs-scale: 1;
  --hs-rotate: 0deg;
  --hs-perspective: 0;
  --hs-rotate-x: 0deg;
  --hs-rotate-y: 0deg;
  --hs-skew-x: 0deg;
  --hs-skew-y: 0deg;
  --hs-translate-ratio: 1;
  --hs-scale-ratio: 0.2;
  --hs-duration-ratio: 1;
  --hs-translate-x-amount: 2rem;
  --hs-translate-y-amount: 3rem;
  --hs-flip-x-amount: 100deg;
  --hs-flip-y-amount: -100deg;
  --hs-perspective-amount: 2000px;
  --hs-stagger-amount: 100ms;
  --hs-skew-amount: 20deg;
  --hs-reveal-amount: 100%;
  --hs-blur: 0;
  --hs-blur-amount: 8px;
}

Responsive variables

You can customize the default variables by overriding them in your CSS. You can also use media queries to change the values depending on the screen size.

:root {
  --hs-duration: 0.4s;
  --hs-easing: ease-in-out;
  --hs-translate-x-amount: 2.5rem;
}

@media (min-width: 768px) {
  :root {
    --hs-duration: 0.6s;
    --hs-easing: ease-in;
    --hs-translate-x-amount: 4rem;
  }
}

--hs-delay

Delay before the animation starts.

• Default: 0ms

--hs-easing

Easing function to use for the animation.

• Default: var(--hs-ease-out)

HumbleScroll comes with 4 easing options out of the box, but you can easily overwrite or create your own.

  --hs-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hs-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --hs-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

--hs-duration

Duration of the animation.

• Default: 600ms

--hs-opacity

Opacity of the element at the start of the animation.

• Default: 1

--hs-translate-x

Amount to translate the element on the x-axis at the end of the animation.

• Default: 0

--hs-translate-y

Amount to translate the element on the y-axis at the end of the animation.

• Default: 0

--hs-scale

Amount to scale the element at the start of the animation.

• Default: 1

--hs-rotate

Amount to rotate the element at the start of the animation.

• Default: 0deg

--hs-perspective

Perspective of the element. Mainly used for animations like flip.

• Default: 0

--hs-rotate-x

Amount to rotate the element on the x-axis at the start of the animation.

• Default: 0deg

--hs-rotate-y

Amount to rotate the element on the y-axis at the start of the animation.

• Default: 0deg

--hs-skew-x

Amount to skew the element on the x-axis at the start of the animation.

• Default: 0deg

--hs-skew-y

Amount to skew the element on the y-axis at the start of the animation.

• Default: 0deg

--hs-translate-ratio

Ratio to use for the translate animation. This number is multiplied by the size of the animation.

• Default: 1

--hs-scale-ratio

Ratio to use for the scale animation. This number is multiplied by the size of the animation.

• Default: 0.2

--hs-duration-ratio

Ratio to use for the duration of the animation. This number is multiplied by the speed of the animation.

• Default: 1

--hs-translate-x-amount

Amount to translate the element on the x-axis at the start of the animation. Used for slide animations.

• Default: 2rem

--hs-translate-y-amount

Amount to translate the element on the y-axis at the start of the animation. Used for slide animations.

• Default: 3rem

--hs-flip-x-amount

Amount to rotate the element on the x-axis at the start of the animation. Used for flip animations.

• Default: 100deg

--hs-flip-y-amount

Amount to rotate the element on the y-axis at the start of the animation. Used for flip animations.

• Default: -100deg

--hs-perspective-amount

Perspective of the element. Mainly used for animations like flip.

• Default: 2000px

--hs-stagger-amount

Amount to stagger the animation. Used for stagger animations.

• Default: 100ms

--hs-skew-amount

Amount to skew the element at the start of the animation. Used for skew animations.

• Default: 20deg

--hs-reveal-amount

Amount to reveal the element. Used for reveal animations.

• Default: 100%

--hs-blur

Amount to blur the element at the start of the animation. Used for blur animations.

• Default: 0

--hs-blur-amount

Amount to blur the element at the start of the animation. Used for blur animations.

• Default: 8px