Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

Question

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

I am attempting to apply a delay to various elements with animated classes on a specific webpage using animate.css version 3.5.1 by Daniel Eden and jquery-viewport-checker version 1.8.7 by Dirk Groenen.

My initial approach was to utilize the setTimeout function like so...

setTimeout(function () {
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });
}, 500
);

However, this method affects all elements with the hidden class as well. I am looking to only delay the animation once it enters the viewport, allowing me to customize the delay for each object individually. I have been searching for a solution but have yet to find one.

jquery css animation viewport

Answer 1

Answer №1

It's interesting how just when I posed a question, I stumbled upon a solution that only requires some CSS tweaks. There's no need to touch the JavaScript at all. This provides a quick and effortless method for implementing delayed animations while using animate.css and viewport-checker. All you have to do is apply a CSS class that utilizes "animation-delay."

Here's the JavaScript snippet:

jQuery('.fadeinleft').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });

You can create custom animated delay CSS classes as many as you need, which can be applied globally across all animations:

.delay-1 {
animation-delay: .25s;
}
.delay-2 {
animation-delay: .5s;
}
.delay-3 {
animation-delay: .75s;
}
.delay-4 {
animation-delay: 1s;
}

Simply add these classes to your animated elements like this:

<div class="col-md-4 fadeinleft">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 1</p>
                <img src="/images/image1.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-1">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 2</p>
                <img src="/images/image2.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-2">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 3</p>
                <img src="/images/image3.jpg">
        </div>
    </a>
</div>

That's all there is to it!

Answer 2

It's interesting how just when I posed a question, I stumbled upon a solution that only requires some CSS tweaks. There's no need to touch the JavaScript at all. This provides a quick and effortless method for implementing delayed animations while using animate.css and viewport-checker. All you have to do is apply a CSS class that utilizes "animation-delay."

Here's the JavaScript snippet:

jQuery('.fadeinleft').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeInLeft',
    offset: 100
   });

You can create custom animated delay CSS classes as many as you need, which can be applied globally across all animations:

.delay-1 {
animation-delay: .25s;
}
.delay-2 {
animation-delay: .5s;
}
.delay-3 {
animation-delay: .75s;
}
.delay-4 {
animation-delay: 1s;
}

Simply add these classes to your animated elements like this:

<div class="col-md-4 fadeinleft">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 1</p>
                <img src="/images/image1.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-1">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 2</p>
                <img src="/images/image2.jpg">
        </div>
    </a>
</div>

<div class="col-md-4 fadeinleft delay-2">
    <a href="#">
        <div class="box-border-wht">
                <p>Title 3</p>
                <img src="/images/image3.jpg">
        </div>
    </a>
</div>

That's all there is to it!

Answer 3

Answer №2

It seems unnecessary to use viewportChecker() or any JavaScript/jQuery on this occasion. The jQuery code in your solution, adding the hidden CSS class to the element (hidden has been replaced by d-none in Bootstrap 4), is redundant since the animated class handles this automatically. Animate.css aims to offer smooth animations without excessive JavaScript/jQuery code.

Since Animate.css relies on the animation(-name) property for animations, it naturally respects the animation-delay property as well. Removing the jQuery code altogether should not affect the functionality of your solution (as mentioned earlier).

Answer 4

It seems unnecessary to use viewportChecker() or any JavaScript/jQuery on this occasion. The jQuery code in your solution, adding the hidden CSS class to the element (hidden has been replaced by d-none in Bootstrap 4), is redundant since the animated class handles this automatically. Animate.css aims to offer smooth animations without excessive JavaScript/jQuery code.

Since Animate.css relies on the animation(-name) property for animations, it naturally respects the animation-delay property as well. Removing the jQuery code altogether should not affect the functionality of your solution (as mentioned earlier).

Enhancing Your Website with Animation Delay using Animate.css and ViewportChecker

Answer №1

Answer №2

Similar questions

Guide to inserting text into an html element upon clicking an ASP:Button

When utilizing AJAX, certain web pages may contain a querystring

Troubleshooting Div Element Width in CSS Not Functioning

Setting the modal option to false in a Messi pop-up dialog box

Tips for sharing a React component with CSS modules that is compatible with both ES Modules and CommonJs for CSS modules integration

Using a PHP variable to trigger the jQuery .show() function

Every time I attempt to input text into the text area, the page automatically refreshes, preventing me from completing any entries

Are the navigation links at the bottom of the sidebar?

Obtaining a distinct identifier from an element

What is the counterpart of Ajax.updater in Jquery?

Using Jquery to make an Ajax request to an Asp.net Web Method

Enlarging the current division while reducing the size of the others when hovering

How to efficiently use nested $.each() in DataTables with jQuery

Struggling to make jeditbale ajax call function properly

Using arrays to create visual Google charts

The element within the flexbox does not extend across the entire width, despite being designated as 100% full width

Angular and Datepair seem to have trouble cooperating

What steps should I take to transform this into an ajax form?

Checking for null variables in returned data using AJAX in Laravel 7

Is there a way to identify modifications in the DOM using jQuery UI Sortable?