Scrolling Animations

A vanilla JS plugin to animate elements on scroll.

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) -->
<div 
  class="scroll-fx js-scroll-fx" 
  data-scroll-fx="translateY, 100px, -100px, 0%, 100%">
</div>

<!-- 👇 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 -->
<div 
  class="scroll-fx@md js-scroll-fx" 
  data-scroll-fx="translateY, 100px, -100px, 0%, 100%">
</div>

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

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

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

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% -->
<div 
  class="scroll-fx js-scroll-fx" 
  data-scroll-fx="theme, default, dark, 0%, 25%">
</div>

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.

<svg
  class="scroll-fx js-scroll-fx"
  data-scroll-fx="strokeDashoffset, 802, 0, 0%, 50%"
  viewBox="0 0 540 160"
  stroke-dasharray="802">
  <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" />
</svg>

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':

<div 
  class="js-scroll-fx" 
  data-scrollable-element="#main-el"
  data-scroll-fx="translateY, 100px, -100px, 0%, 100%">
</div>

Categories

• Effects > Scroll
• Plugins > Misc

Bug report & feedback

Component Github page ↗