Animate.css: activate animations upon entering the viewport during scrolling

Question

Animate.css: activate animations upon entering the viewport during scrolling

I'm currently testing out animate.css for my project.

Here's a snippet of my code:

<h2 class="lazyload animate__animated animate__rotateInDownLeft" data-link="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">Lorem ipsum</h2>

Don't worry about animate.css being loaded lazily in this case.

You can check out my page here:

The h2 element we are focusing on is the one at the bottom with the text "Lorem ipsum".

The Issue

Everything works fine when I reload the screen with the h2 already visible.

However, what I want to achieve is an animation effect while scrolling - the h2 should start moving only when it comes into view as you scroll down.

Is there a way to make this happen?

css animate.css

Answer 1

Answer №1

@Mohammed came up with an interactive solution using jQuery.

On the other hand, here is a straightforward approach using vanilla JS and incorporating Animate.css, Waypoints, along with a few lines of CSS:

Javascript:

// Link to helpful solutions: https://stackoverflow.com/a/74810616/3929620, https://stackoverflow.com/a/32677672/3929620, https://stackoverflow.com/a/69614783/3929620
const animatedElements = [].slice.call(document.querySelectorAll('.__animate__animated'))
animatedElements.map(function (element) {
    new Waypoint({
        element: element,
        offset: 'bottom-in-view',
        handler: function(direction) {
            // Further reference: https://stackoverflow.com/a/56914528/3929620
            element.className = element.className.replace(/__animate__/g, 'animate__')
            this.destroy()
        },
    })
})

CSS:

/* Utilizing attribute substrings per W3C recommendations */
[class*="__animate__"] {
    opacity: 0;
}

HTML:

<div class="__animate__animated __animate__fadeIn">
    <!-- Insert your code here -->
</div>

Feel free to suggest any enhancements! ;)

Answer 2

@Mohammed came up with an interactive solution using jQuery.

On the other hand, here is a straightforward approach using vanilla JS and incorporating Animate.css, Waypoints, along with a few lines of CSS:

Javascript:

// Link to helpful solutions: https://stackoverflow.com/a/74810616/3929620, https://stackoverflow.com/a/32677672/3929620, https://stackoverflow.com/a/69614783/3929620
const animatedElements = [].slice.call(document.querySelectorAll('.__animate__animated'))
animatedElements.map(function (element) {
    new Waypoint({
        element: element,
        offset: 'bottom-in-view',
        handler: function(direction) {
            // Further reference: https://stackoverflow.com/a/56914528/3929620
            element.className = element.className.replace(/__animate__/g, 'animate__')
            this.destroy()
        },
    })
})

CSS:

/* Utilizing attribute substrings per W3C recommendations */
[class*="__animate__"] {
    opacity: 0;
}

HTML:

<div class="__animate__animated __animate__fadeIn">
    <!-- Insert your code here -->
</div>

Feel free to suggest any enhancements! ;)

Answer 3

Answer №2

It appears that animate.css does not offer built-in scroll animations, typically requiring JavaScript. To achieve this effect, consider implementing a window.scroll event listener to detect when your h2 element enters the viewport and then apply the class animate__rotateInDownLeft.

Answer 4

It appears that animate.css does not offer built-in scroll animations, typically requiring JavaScript. To achieve this effect, consider implementing a window.scroll event listener to detect when your h2 element enters the viewport and then apply the class animate__rotateInDownLeft.

Answer 5

Answer №3

Unfortunately, the animate.css library does not have this specific feature built in. You will need to utilize JavaScript/jQuery to implement any custom animations or effects you desire.

I've been experimenting with creating my own animation library recently and have managed to develop a more robust solution.

To see my dynamic animations in action, check out mycustomanimations.com

You can also find the code on Github at MyCustomAnimations

If you have any questions, please leave a comment below.

If you encounter any issues while using the library, don't hesitate to open an issue on Github for support.

Answer 6

Unfortunately, the animate.css library does not have this specific feature built in. You will need to utilize JavaScript/jQuery to implement any custom animations or effects you desire.

I've been experimenting with creating my own animation library recently and have managed to develop a more robust solution.

To see my dynamic animations in action, check out mycustomanimations.com

You can also find the code on Github at MyCustomAnimations

If you have any questions, please leave a comment below.

If you encounter any issues while using the library, don't hesitate to open an issue on Github for support.

Animate.css: activate animations upon entering the viewport during scrolling

Answer №1

Answer №2

Answer №3

Similar questions

I need help with this Jquery code - trying to target an element with a specific attribute value. What am I missing here?

Eliminating the excess space at the beginning of dialogues

Enhancing the appearance of h3 headings using CSS without changing the HTML code

Hovering over an element will change its background color along with adjusting the background

Effective method for centering a navigation bar vertically within a section element without relying on absolute positioning

Positioning a div inside another div using CSS

Step-by-step guide to showing a div upon clicking an element using jQuery

Adjusting the width of the responsive design is causing additional white space to appear in

Improve the design of the email newsletter

Split the text on the left side before disrupting the flow on the following line

Alter the class following modifications to the list

Issue with custom font not appearing correctly within SVG pattern background image

The functionality of jQuery click events seems to be disabled on the webpage, however, it is working perfectly fine on jsFiddle

How to eliminate vertical spacing between rows in Bootstrap?

Move the DIV element to a static section within the DOM

The Transition Division Is Malfunctioning

Issue with Google Maps: undesired change in map size

Modify the Embed Audio Player in Google Drive

Is it practical to extract the page type/name from the CSS of the selected tab?

Learn how to separate two SCSS files and compile them into individual CSS files