Animate.css: trigger animation when becoming visible while scrolling

Question

I'm experimenting with animate.css.

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>

Please, don't be afraid of animate.css being loadeded lazily here.

My page: https://galina.xyz/makiyazh/oshibki-pri-makiyazh

We are interested in the bottommost h2 with the text "Lorem ipsum".

The problem

This works perfectly when I reload the screen with the h2. That is when it is already visible.

But what I'm looking for is an animation effect while scrolling. That is the H2 should start moving only when it has been scrolled to.

Is it possible?

Frugan · Accepted Answer · 2023-03-21 16:49:48Z

@Mohammed animate-dynamic solution use jQuery.

This one instead is a simple solution in vanilla JS using Animate.css, Waypoints and a few lines of css:

javascript:

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

css:

/* https://www.w3.org/TR/selectors/#attribute-substrings */
[class*="__animate__"] {
    opacity: 0;
}

html:

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

Any improvement is welcome! ;)

user31782 · Accepted Answer · 2021-10-13 22:30:39Z

-1

Seems like animate.css doesn't provide the animate on scroll functionality, which usually needs javascript. So you are better off adding your own window.scroll event, which checks if your h2 becomes visible in the the viewport then add class animate__rotateInDownLeft.

answered Oct 13, 2021 at 22:30

user31782

7,81516 gold badges80 silver badges160 bronze badges

Comments

Mohammed Khurram · Accepted Answer · 2023-02-19 10:06:52Z

-1

There is no such feature in animate.css library, you need to use javascript/Jquery to do some tweaks and tricks and get what you want.

I am working on such library from few days, and managed to somehow make a stable library.

visit animate-dynamic.ga

Github animate-dynamic

For any queries comment down.

For any difficulties with library feel free to create issue.

edited Feb 19, 2023 at 10:06

answered Oct 18, 2021 at 10:52

Mohammed Khurram

6361 gold badge8 silver badges15 bronze badges

2 Comments

Frugan Over a year ago

Bro, remove jQuery please! medium.com/@apoorva72900/why-is-jquery-dead-b41dba56491e

Mohammed Khurram Over a year ago

@Frugan yes, v3.0.0 now it's purely JS library.

Collectives™ on Stack Overflow

Animate.css: trigger animation when becoming visible while scrolling

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related