Go to homepage

Projects /

Scrolling Animations

A vanilla JS plugin to animate elements on scroll.

View Demo

How to

The Scrolling Animations component is used to animate a property value between two scroll points.

To animate an object, apply the .scroll-fx and .js-scroll-fx classes, along with the data-scroll-fx attribute where you define the animation:

<!-- 👇 Example: animate translateY from 100px (0% scroll) to -100px (100% scroll) -->
  class="scroll-fx js-scroll-fx" 
  data-scroll-fx="translateY, 100px, -100px, 0%, 100%">

<!-- 👇 Understanding the data-scroll API -->
<!-- data-scroll-fx="{property}, {initialValue}, {endValue}, {scrollYStart}, {scrollYEnd}" -->

To enable the animation at a specific breakpoint, use the .scroll-fx@{breakpoint} class:

<!-- 👇 enable the animation at the medium breakpoint -->
  class="scroll-fx@md js-scroll-fx" 
  data-scroll-fx="translateY, 100px, -100px, 0%, 100%">

To apply multiple animations to the same element, add multiple data-scroll-fx-{n} attributes:

<!-- 👇 apply multiple animations -->
  class="scroll-fx js-scroll-fx" 
  data-scroll-fx-1="translateY, 100px, -100px, 0%, 100%"
  data-scroll-fx-2="opacity, 0, 1, 15%, 25%">

Properties #

You can animate the following properties:

  • translate
  • translateX
  • translateY
  • translateZ
  • rotate
  • rotateX
  • rotateY
  • rotateZ
  • skew
  • skewX
  • skewY
  • scale
  • scaleX
  • scaleY
  • opacity
  • theme
  • strokeDashoffset

Scroll Points #

The animation boundaries (where the animation starts/ends) are set within the data-scroll-fx attributes using percentage values.

For example:

  • 0% is when the element enters the viewport;
  • 50% is when the element is in the center of the viewport;
  • 100% is when the element exits the viewport
scrolling points

Color Themes #

The plugin can also animate between color themes, in which case the second scroll point determines the theme change:

<!-- 👇 switch from 'default' to 'dark' color theme when scroll = 25% -->
  class="scroll-fx js-scroll-fx" 
  data-scroll-fx="theme, default, dark, 0%, 25%">

Stroke Dashoffset #

To create a line that draws itself, animate the stroke-dashoffset of an SVG element.

Apply the .scroll-fx and .js-scroll-fx classes to the SVG element, set a stroke-dasharray value high enough to hide the path, then animate the strokeDashoffset from that value to 0.

  class="scroll-fx js-scroll-fx"
  data-scroll-fx="strokeDashoffset, 802, 0, 0%, 50%"
  viewBox="0 0 540 160"
  <title>Scribble decoration</title>
  <path d="M12.428,142.978c18.24,7.165,52.579,17.249,90.376,6.573,80.38-22.7,126.042-125.074,109.273-143.78-3.814-4.255-11.282-4.656-16.432-2.465-22.27,9.474-28.8,79.168-.822,117.489,37.265,51.047,128.463,36.438,161.034,31.221C438.786,138.732,496.822,91.9,527.572,61.64" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2" />

Scrollable Element #

By default, the window is the element generating the vertical scrollbar. If you have a different scrollable element in your page, you can use the data-scrollable-element attribute to pass the CSS selector of the scrollable element.

For example, if you have a <main id="main-el"> with a height: 100vh and overflow: auto, you can set data-scrollable-element='#main-el':

  data-scroll-fx="translateY, 100px, -100px, 0%, 100%">


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.