Enhance your webpage with dynamic styling using third-party CSS animation

Question

Enhance your webpage with dynamic styling using third-party CSS animation

Apologies for any similarity to other questions on this topic. I have searched extensively, but any assistance would be greatly appreciated.

I am utilizing a new animation library from Animista to animate specific elements on a test website. Animating elements upon page load is not an issue, but I am unsure how to make them trigger as they become visible, as is common on many websites nowadays.

For instance;

.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  
  ...

.trigger {
  /* The plan was to add this to all elements and then trigger animations each time the class is in the viewport*/
}

<h1 class="bounce-in-top trigger">Page title, animates on load</h1>


...

<h2 class="bounce-in-top trigger">Lower down, should animate when visible</h2>

The animation is applied to both header 1 and header 2, but the header 2 animation runs before it's visible to the user.

.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top {
  ...

.trigger {
  /* The plan was to add this to all elements and then trigger animations each time the class is in the viewport*/
}

<h1 class="bounce-in-top trigger">Page title, animates on load</h1>


...

<h2 class="bounce-in-top trigger">Lower down, should animate when visible</h2>

I would like to use some form of query selector so that every time an element to be animated appears, its animation would run.

Any guidance and functional code would be immensely appreciated as I am struggling to implement this.

Thank you in advance.

javascript jquery html css css-animations

Answer 1

Answer №1

In my opinion, it would be beneficial to monitor the scrolling behavior of the webpage and trigger an animation when the scroll position exceeds a specific point. This can be achieved by adjusting the CSS animation properties through JavaScript. Here's a simple illustration:

<html lang="en">
<head>
<style> 
    #header2 {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        -webkit-animation: none 1s infinite; /* Safari 4.0 - 8.0 */
        animation: none 1s infinite;
    }
    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        from {left: 0px;}
        to {left: 200px;}
    }


    @keyframes mymove {
        from {left: 0px;}
        to {left: 200px;}
    }

</style>
</head>
<body>
    <h1 id="header1" style="height: 1200px;">This is first paragraph</h1>
    <br>
    <h1 id="header2">This is second paragraph</h1>

    <script>
        let myHeader2 = document.getElementById("header2");
        window.setInterval(checkScrollingPosition, 200);

        function checkScrollingPosition(){
            console.log(window.scrollY)
            if (window.scrollY > 200){
                //starting animation if scrollPosition > 200
                console.log("starting animation...")
                startAnimation()
                return;
            }

        }

        function startAnimation(){
            myHeader2.style.animation = "mymove 5s 1"
            myHeader2.style.WebkitAnimation = "mymove 5s 1"
        }
    </script>

</body>
</html>

Depending on your requirements, you may adjust the threshold value to a percentage of the page's height. To do this, explore different methods of accessing the page's scrolling state.

Answer 2

In my opinion, it would be beneficial to monitor the scrolling behavior of the webpage and trigger an animation when the scroll position exceeds a specific point. This can be achieved by adjusting the CSS animation properties through JavaScript. Here's a simple illustration:

<html lang="en">
<head>
<style> 
    #header2 {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        -webkit-animation: none 1s infinite; /* Safari 4.0 - 8.0 */
        animation: none 1s infinite;
    }
    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        from {left: 0px;}
        to {left: 200px;}
    }


    @keyframes mymove {
        from {left: 0px;}
        to {left: 200px;}
    }

</style>
</head>
<body>
    <h1 id="header1" style="height: 1200px;">This is first paragraph</h1>
    <br>
    <h1 id="header2">This is second paragraph</h1>

    <script>
        let myHeader2 = document.getElementById("header2");
        window.setInterval(checkScrollingPosition, 200);

        function checkScrollingPosition(){
            console.log(window.scrollY)
            if (window.scrollY > 200){
                //starting animation if scrollPosition > 200
                console.log("starting animation...")
                startAnimation()
                return;
            }

        }

        function startAnimation(){
            myHeader2.style.animation = "mymove 5s 1"
            myHeader2.style.WebkitAnimation = "mymove 5s 1"
        }
    </script>

</body>
</html>

Depending on your requirements, you may adjust the threshold value to a percentage of the page's height. To do this, explore different methods of accessing the page's scrolling state.

Answer 3

Answer №2

Utilize the IntersectionObserver API to check if elements are within the user's view and trigger a function when they come into view.

Within the IntersectionObserver, call a function that iterates through all elements entering or exiting the view. This function allows you to inspect each element's current position individually.

To apply an animation to an element once it enters the view, check if the element is in sight and then add the animation class to it.

In the snippet below, I've updated your code by enclosing each title within a container. This setup enables the title to animate within its container while also controlling overflow.

The observer targets elements with the class .trigger. When these elements become visible, they receive the class .bounce-in-top.

To prevent abrupt animations starting from the top, I set a starting position for the .title elements equal to the initial keyframe of the animation.

// Create the observer.
const observer = new IntersectionObserver(entries => { // entries is a list of elements that have come in our out of view
  entries.forEach(entry => { // Loop over every single entry
     if (entry.isIntersecting || entry.intersectionRatio > 0) { // Check that an entry has come INTO view.
        entry.target.classList.add('bounce-in-top'); // Add the class to the element.
     }
  });
});

// Select the triggers
const triggers = document.querySelectorAll('.trigger');

// Observe the triggers.
triggers.forEach(trigger => {
  observer.observe(trigger);
});

/* Create a default begin state */
.title {
  -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
}

/* Hide overflow of title container. */
.trigger {
  overflow: hidden;
}

/* Select title for animation */
.bounce-in-top .title {
-webkit-animation: bounce-in-top 1.1s both;
        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top {
  /* Keyframe rules here */
}
@keyframes bounce-in-top {
    /* Keyframe rules here */
}

<div class="trigger">
  <h1 class="title">Page title, animates on load</h1>
</div>

Answer 4

Utilize the IntersectionObserver API to check if elements are within the user's view and trigger a function when they come into view.

Within the IntersectionObserver, call a function that iterates through all elements entering or exiting the view. This function allows you to inspect each element's current position individually.

To apply an animation to an element once it enters the view, check if the element is in sight and then add the animation class to it.

In the snippet below, I've updated your code by enclosing each title within a container. This setup enables the title to animate within its container while also controlling overflow.

The observer targets elements with the class .trigger. When these elements become visible, they receive the class .bounce-in-top.

To prevent abrupt animations starting from the top, I set a starting position for the .title elements equal to the initial keyframe of the animation.

// Create the observer.
const observer = new IntersectionObserver(entries => { // entries is a list of elements that have come in our out of view
  entries.forEach(entry => { // Loop over every single entry
     if (entry.isIntersecting || entry.intersectionRatio > 0) { // Check that an entry has come INTO view.
        entry.target.classList.add('bounce-in-top'); // Add the class to the element.
     }
  });
});

// Select the triggers
const triggers = document.querySelectorAll('.trigger');

// Observe the triggers.
triggers.forEach(trigger => {
  observer.observe(trigger);
});

/* Create a default begin state */
.title {
  -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
}

/* Hide overflow of title container. */
.trigger {
  overflow: hidden;
}

/* Select title for animation */
.bounce-in-top .title {
-webkit-animation: bounce-in-top 1.1s both;
        animation: bounce-in-top 1.1s both;
}

@-webkit-keyframes bounce-in-top {
  /* Keyframe rules here */
}
@keyframes bounce-in-top {
    /* Keyframe rules here */
}

<div class="trigger">
  <h1 class="title">Page title, animates on load</h1>
</div>

Enhance your webpage with dynamic styling using third-party CSS animation

Answer №1

Answer №2

Similar questions

Design with Internal Elements

Produces consistent results despite variations in tag names within the DOM

Substitute all numerical values with a designated number from a variable

The error message "TypeError XXX is not a function in NodeJS" indicates that

The 'slice' method is not accessible with the Kendo Grid Object

Embed a hyperlink within an informational passage

In what specific format does this plugin expect the callback string to be encoded as? (jquery-ui-multisearch)

The attempt to run 'readAsBinaryString' on 'FileReader' was unsuccessful. The first parameter is not the expected type 'Blob'

JS Implementation of the Coin Change Algorithm

Even with the text field populated and clearly existing, Firefox is still throwing a null error when trying to retrieve it using

sending functions into angular as opposed to using 'function()'

``The presence of symlink leading to the existence of two different versions of React

Trouble with integrating jQuery Mobile data-role page into a PHP project

Unable to retrieve property from NextRequest

Utilizing CSS to dynamically update the nth-child selector

What is causing the malfunction in jQuery version 1.7.x?

Is there a way to incorporate a <u> tag into an inline angular variable in HTML that has been generated by a ternary expression?

Encountering a problem with the multi-page template structure in jQuery Mobile

How can I adjust the scale and position of my image textures in Three.js?

Exploring the power of jQuery selector syntax with the inclusion of