Lightweight CSS Animations On Scroll

Use this JS code snippet to take full advantage of CSS animations in your Webflow project.

Copy Code

<script>
window.addEventListener("DOMContentLoaded", (event) => {
  document.querySelectorAll("[data-scroll-trigger]").forEach((trigger) => {
    const targetClasses = trigger.getAttribute("data-scroll-targets");
    if (targetClasses !== undefined) {
      const targetElements = trigger.querySelectorAll(targetClasses);
      const handleIntersection = (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            targetElements.forEach((target) => {
              const animationName = window.getComputedStyle(target).animationName;
              target.style.animationName = "none";
              void target.offsetWidth;
              target.style.animationName = animationName;
            });
          }
        });
      };
      new IntersectionObserver(handleIntersection).observe(trigger);
    }
  });
});
</script>

To use this code snippet, simply copy and paste this code into the page settings of your project in Webflow, or, if you plan to use CSS animations site wide, paste this code snippet into the custom code area of your entire project (found in site settings under the custom code tab in your Webflow project).

Next, you'll just need to add the following data attributes to the section (a container, section, or parent wrapper is recommended) you want to animate once the page has scrolled to that section.

data-scroll-trigger=""

data-scroll-targets=".your-class-here, .your-other-class"

Replace ".your-class-here" with the class you've applied your CSS animations to, and make sure that class is applied to all the elements within the section that you want to see animated.

The ".your-other-class" is just there to demonstrate that you can trigger as many animations as you want. To trigger more than one CSS animation class, simply separate each class name in the `data-scroll-targets` with commas and a space.

‍

Note* You'll need to set up your CSS animations and @keyframes for this to work.

To do this, start by adding a custom HTML embed to the top of your page(s).

Next, you'll want to create your CSS Keyframes inside of some <style></style> tags in the HTML embed.

For Example:

@keyframes slideup {from {opacity: 0; transform: translateY(100%);} to {opacity: 1; transform: translateY(0%);}}

Then, you'll want to add a div block to your project, and give it a class of "slideup"

The word "slideup" shown as a class added to a Webflow div block

After you've added the div block and given it a class, add all the appropriate CSS animation styles you want this class to have in the "custom properties" section in the style panel, like in the image below.

Animation properties displayed in Webflow

You can read more about CSS animations and the properties available to use on this MDN article.

Once that's finished, you no longer need the div block. You can now add the class "slideup" to any of your elements and watch the magic happen.

Because you've likely added "slideup" as a combo class, you can adjust the custom properties to make the animation behave exactly the way you need it to and it won't change the base class of "slideup".