Tips for activating multiple CSS animations when scrolling

Question

Tips for activating multiple CSS animations when scrolling

I am currently working on a project that involves multiple CSS animations. However, I am facing an issue where these animations only occur once when the page initially loads. I would like them to trigger every time the user scrolls past them, regardless of whether they are scrolling up or down the page. Unfortunately, my attempts at using JavaScript to achieve this have been unsuccessful so far. The specific animations include a colored box sliding in from the left and body copy/header elements fading in from the bottom. I aim to stagger these two animations slightly, with the text appearing after the box has slid in halfway. I have tried grouping these divs together to reveal them simultaneously upon scroll, as well as treating them as separate entities within my JavaScript code.

$(window).scroll(function() {
  $('#Featuring_Animated').each(function() {
    var imagePos = $(this).offset().top;
    var imageHeight = $(this).height();
    var topOfWindow = $(window).scrollTop();

    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
      $(this).addClass("slide-in-left");
    } else {
      $(this).removeClass("slide-in-left");
    }
  });
});

$('.element-to-hide').css('visibility', 'hidden');

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */

.Featuring_Textbox {
  -webkit-animation: slide-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  visibility: visible !important;
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation fade-in-bottom left sections
 * ----------------------------------------
 */

#Featuring_About,
#Featuring_Heading {
  -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
  animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
  visibility: visible !important;
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}


/**
 * ----------------------------------------
 * animation fade-in-bottom left sections
 * ----------------------------------------
 */

#Featuring_Textbox {
  opacity: 0.9;
  fill: #3B4A5C;
}

.Featuring_Textbox {
  position: absolute;
  overflow: visible;
  width: 640px;
  height: 552px;
  left: 0px;
  top: 0px;
}

#Featuring_About {
  left: 74px;
  top: 238px;
  position: absolute;
  text-align: left;
  font-size: 18px;
  color: white;
}

#Featuring_Heading {
  left: 74px;
  top: 143px;
  position: absolute;
  text-align: left;
  font-size: 40px;
  color: white;
}

<html>
<head>
<script language="JavaScript" type="text/javascript" src="colocation.js"></script>
</head>

<div class="Featuring_Animated element-to-hide" style="visibility:visible;">
  <svg class="Featuring_Textbox">
            <rect id="Featuring_Textbox" rx="0" ry="0" x="0" y="0" width="640" height="552"></rect>
         </svg>
  <div id="Featuring_About">
    <span>Sample Text</span>
  </div>
  <div id="Featuring_Heading">
    <span>FEATURING</span>
  </div>
</div>

</html>

javascript html css css-animations

Answer 1

Answer №1

For those who prefer not to use a library, there is an alternative method available. (compiled from various contributors, thank you) Different effects can be assigned to different selectors. The animation will trigger once when a set percentage of the element becomes visible on the screen (isInViewport function - currently set at 35%). It will only trigger once.

// Ensure every element has a "hidden" class if its starting state is hidden (e.g., 'visibility:hidden' for fade-in effects)

var elemList = {elements:[ // Add elements and their corresponding animations here
    {elem:"#home-description", animation:"element-animation"},
    {elem:".nav-item", animation:"slide-in-top"}
]};

var isInViewport = function(el, percentVisible) {
    let
    rect = el.getBoundingClientRect(),
        windowHeight = (window.innerHeight || document.documentElement.clientHeight);

    return !(
        Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
        Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
    )
};



function check(){
    var eArray = elemList.elements;

    if (eArray.length >= 1){  
        eArray.forEach( function(e,i){

            if (e.elem){ // Check if element selector is not empty
                let el = document.querySelectorAll(e.elem);

                if (el.length >= 1){

                    el.forEach( function(x,y){
                        if (isInViewport(x,35)){
                            x.classList.remove("hidden"); // Remove this line if the element should be visible by default
                            x.classList.add(e.animation);
                            eArray.splice(i, 1);
                            
                        }
                    })
                }
            }
        })
    }
}


window.addEventListener('load', function () {
    check();
    document.addEventListener('scroll', function () {
        check();
    })
}, {
passive: true
});

Answer 2

For those who prefer not to use a library, there is an alternative method available. (compiled from various contributors, thank you) Different effects can be assigned to different selectors. The animation will trigger once when a set percentage of the element becomes visible on the screen (isInViewport function - currently set at 35%). It will only trigger once.

// Ensure every element has a "hidden" class if its starting state is hidden (e.g., 'visibility:hidden' for fade-in effects)

var elemList = {elements:[ // Add elements and their corresponding animations here
    {elem:"#home-description", animation:"element-animation"},
    {elem:".nav-item", animation:"slide-in-top"}
]};

var isInViewport = function(el, percentVisible) {
    let
    rect = el.getBoundingClientRect(),
        windowHeight = (window.innerHeight || document.documentElement.clientHeight);

    return !(
        Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
        Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
    )
};



function check(){
    var eArray = elemList.elements;

    if (eArray.length >= 1){  
        eArray.forEach( function(e,i){

            if (e.elem){ // Check if element selector is not empty
                let el = document.querySelectorAll(e.elem);

                if (el.length >= 1){

                    el.forEach( function(x,y){
                        if (isInViewport(x,35)){
                            x.classList.remove("hidden"); // Remove this line if the element should be visible by default
                            x.classList.add(e.animation);
                            eArray.splice(i, 1);
                            
                        }
                    })
                }
            }
        })
    }
}


window.addEventListener('load', function () {
    check();
    document.addEventListener('scroll', function () {
        check();
    })
}, {
passive: true
});

Tips for activating multiple CSS animations when scrolling

Answer №1

Similar questions

At times, the Ajax response may be lacking in content. However, the response tab in Google

Unveil the Expressjs middleware within the API Client

Issues arise when submitting the form on a web page with an MVC 4 partial view, causing the page

The screen reader is unable to interpret the text that is visible within the anchor tag

Form an array using the values that are returned

Encountering a problem while verifying pattern using regular expressions

Setting up an i18n project in AngularJS

No information available at the moment

What could be causing the if statement to evaluate as false even though the div's style.display is set to 'block'?

Replacing an existing pie chart with a new one using JavaScript

Using jQuery to make a PNG image draggable and allow it to overlap with

How can we use jQuery to change the format of a

Encountering a 404 error when trying to navigate to the next route using the Link component

Discovering which chip has wrapped to the next line in Material UI Autocomplete can be found by closely inspect

I am looking to incorporate a feature in my form that allows for multiple file uploads and displaying them

Will terminating a Google Cloud Storage stream impact network usage?

What is the method for obtaining a dynamic image URL for the <a href> link?

A dynamic modal window built with ReactJS

The selector often yields varying results when used in a traditional browser versus when it is utilized with Selenium

Steps to invoke a function to add an element into a list