Only the elements that are every other one in the sequence will be iter

Question

Only the elements that are every other one in the sequence will be iter

I am working on animating a list of elements with CSS3 animations. Here is an example of the code:

.anim-slide-left {
    animation: anim-slide-left 0.8s ease forwards;
    -webkit-animation: anim-slide-left 0.8s ease forwards;

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

/* there are more, but very similar */

My goal is to only animate visible elements with the 'animate' class when the page loads using JavaScript:

$(function() {

    var $window = $(window);
    var $toAnimate = $('.animate');
    animate();

        // check if element is on the viewport
    function isElementVisible(elementToBeChecked)
    {
        var TopView = $(window).scrollTop();
        var BotView = TopView + $(window).height();
        var TopElement = elementToBeChecked.offset().top;
        return ((TopElement <= BotView) && (TopElement >= TopView));
    }
        // add css animation class
    function animate()
    {
        $toAnimate.each(function(i, el)
        {
            var $el = $toAnimate.eq(i);

            if ($el.length && isElementVisible($el))
            {
                    // remove already visible elements
                $toAnimate.splice(i, 1);

                    // setting up animation effect
                $el.addClass( $el.data('effect') );

                $el.removeClass('animate');
            } 
        });
    }
});

However, I encountered a problem where only every second element is checked as visible. It should be checking each element individually like this:

https://i.sstatic.net/XdOGU.jpg

I want all elements to be animated correctly when they become visible while scrolling down the page, so I added this jQuery scroll function:

$window.scroll( function()
{
    animate();
});

How can I make sure that every element is properly iterated through in this scenario?

EDIT:

After considering feedback from @T.J. Crowder, I updated the animate function by including a filter function suggested by @charlietfl:

$('.animate').filter( function( idx ) {
    if( isElementVisible($(this)) )
    {
        $(this).addClass( $(this).data('effect') );
        $(this).removeClass('animate');
    }
});

This modification has resolved the issue. Thank you for your help.

javascript jquery html css css-animations

Answer 1

Answer №1

There are a few issues to address:

The set being modified ($toAnimate) is also being iterated over, resulting in indexes becoming incorrect after removals.
It's important to note that splice is not an official jQuery method and may be removed in the future as it is undocumented. jQuery objects are not true arrays but rather array-like.
jQuery does not provide a clear guarantee on how each will behave when entries are added or removed from the set being iterated (unlike JavaScript's forEach).

To avoid these issues, you can convert $toAnimate into a legitimate array using .get:

var $toAnimate = $('.animate').get();
// ---------------------------^^^^^^

Then, you can proceed with the following approach:

function animate()
{
    $toAnimate.forEach(function(el)
    {
        var $el = $(el);
        if (isElementVisible($el))
        {
            // Remove visible elements
            $toAnimate.splice(i, 1);

            // Set up animation effect
            if( $el.data('effect') == 'anim-bar' ) animateBar($el);
            else $el.addClass( $el.data('effect') );

            $el.removeClass('animate');
        } 
    });
}

Answer 2

There are a few issues to address:

The set being modified ($toAnimate) is also being iterated over, resulting in indexes becoming incorrect after removals.
It's important to note that splice is not an official jQuery method and may be removed in the future as it is undocumented. jQuery objects are not true arrays but rather array-like.
jQuery does not provide a clear guarantee on how each will behave when entries are added or removed from the set being iterated (unlike JavaScript's forEach).

To avoid these issues, you can convert $toAnimate into a legitimate array using .get:

var $toAnimate = $('.animate').get();
// ---------------------------^^^^^^

Then, you can proceed with the following approach:

function animate()
{
    $toAnimate.forEach(function(el)
    {
        var $el = $(el);
        if (isElementVisible($el))
        {
            // Remove visible elements
            $toAnimate.splice(i, 1);

            // Set up animation effect
            if( $el.data('effect') == 'anim-bar' ) animateBar($el);
            else $el.addClass( $el.data('effect') );

            $el.removeClass('animate');
        } 
    });
}

Answer 3

Answer №2

By iteratively removing items from the array within the loop, you are causing the next item to shift into the current position, potentially resulting in skipping over an element. However, if you reverse the loop and iterate through the array from the end, removing items will not disrupt the remaining elements:

function executeAnimation()
{
    for (var index = $elementsToAnimate.length - 1; index >= 0; index--)
    {
        var $element = $elementsToAnimate.eq(index);

        if ($element.length && isVisible($element))
        {
            // Remove already visible elements
            $elementsToAnimate.splice(index, 1);

            // Apply animation effect
            if( $element.data('effect') == 'anim-bar' ) animateBar($element);
            else $element.addClass( $element.data('effect') );

            $element.removeClass('animate');
        } 
    });
}

Answer 4

By iteratively removing items from the array within the loop, you are causing the next item to shift into the current position, potentially resulting in skipping over an element. However, if you reverse the loop and iterate through the array from the end, removing items will not disrupt the remaining elements:

function executeAnimation()
{
    for (var index = $elementsToAnimate.length - 1; index >= 0; index--)
    {
        var $element = $elementsToAnimate.eq(index);

        if ($element.length && isVisible($element))
        {
            // Remove already visible elements
            $elementsToAnimate.splice(index, 1);

            // Apply animation effect
            if( $element.data('effect') == 'anim-bar' ) animateBar($element);
            else $element.addClass( $element.data('effect') );

            $element.removeClass('animate');
        } 
    });
}

Only the elements that are every other one in the sequence will be iter

Answer №1

Answer №2

Similar questions

Stylize the selected item in a kendoui listview

Launching a popup within a popup

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Guide to transforming Excel formulas into JavaScript

Creating a button inside an input field using HTML and CSS

Sending information from a directive to a controller

Await that's locked within a solo asynchronous function

Adding vertical separation between Bootstrap Cards

Tips for aligning multiple columns within a Bootstrap 3 carousel

Struggling with creating an html file that is responsive on mobile devices

Reorganize the data in a different manner (collections of items instead of individual items linked to groups)

Bring to life by pressing a Trigger button

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Initiating actions set post DOM load - JIRA unveils fresh problem modal

Tips on using the map and filter methods to narrow down a nested array based on specific object

What is the best way to select both an inline element and a block-level element at the same time?

Utilize a counter to iterate the name repeatedly

Organize an array based on its ratio

Implementing dual backgrounds in CSS

Have you ever wondered how the automatic video play on scroll feature works on Tiktok.com and YouTube shorts when using a mobile device?