Go to homepage

Projects /

Scrolling Animations

A vanilla JS plugin to animate elements on scroll.

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

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 [email protected]{breakpoint} class:

<!-- 👇 enable the animation at the medium breakpoint -->
<div 
  class="[email protected] 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
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% -->
<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

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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