Working on getting a Font Awesome icon to CSS animate upon entry into the viewport on scroll. Behaves as expected only when the Developer Tools panel is open in various browsers on Mac: Chrome, Safari, Firefox.

It does work in Chrome on iOS 12 on an iPhone 6+.

Implemented by adding a new throwaway class to the element, which is then replaced by the class with the animation CSS upon entry into viewport.

Did some research into it and may be a DOM loading issue - that's getting into the deep end for this baby developer!

JS is dropped into a code snippet plugin as follows:

<? php
function playon_view(){ //wrap it in php
?>
<script>

const animateHTML = function() {
    let elems;
    let windowHeight;

    function init() {
        elems = document.querySelectorAll('.fodder'); //new throwaway class
        windowHeight = window.innerHeight;
        addClass();
        addEventHandlers();
        checkPosition();
    }

    function addClass() {
        const testarray = document.getElementsByClassName('fa-quote-left'); //target the quote icon
        for (let i = 0; i < testarray.length; i++) {
            testarray[i].className += ' fodder'; //add the new class
        }
    }

    function addEventHandlers() {
        window.addEventListener('scroll', checkPosition);
        window.addEventListener('resize', init);
    }

    function checkPosition() {
        for (let i = 0; i < elems.length; i++) {
            const positionFromTop = elems[i].getBoundingClientRect().top;
            if (positionFromTop - windowHeight <= 0) {
                elems[i].className = elems[i].className.replace(
                    'fodder', //throw away the class
                    'quotate', //replace the class with the animation class
                );
            }
        }
    }
    return {
        init,
    };
};
animateHTML().init();

</script>
<?php
}
add_action('wp_footer', 'playon_view');

Working on getting a Font Awesome icon to CSS animate upon entry into the viewport on scroll. Behaves as expected only when the Developer Tools panel is open in various browsers on Mac: Chrome, Safari, Firefox.

It does work in Chrome on iOS 12 on an iPhone 6+.

Implemented by adding a new throwaway class to the element, which is then replaced by the class with the animation CSS upon entry into viewport.

Did some research into it and may be a DOM loading issue - that's getting into the deep end for this baby developer!

JS is dropped into a code snippet plugin as follows:

<? php
function playon_view(){ //wrap it in php
?>
<script>

const animateHTML = function() {
    let elems;
    let windowHeight;

    function init() {
        elems = document.querySelectorAll('.fodder'); //new throwaway class
        windowHeight = window.innerHeight;
        addClass();
        addEventHandlers();
        checkPosition();
    }

    function addClass() {
        const testarray = document.getElementsByClassName('fa-quote-left'); //target the quote icon
        for (let i = 0; i < testarray.length; i++) {
            testarray[i].className += ' fodder'; //add the new class
        }
    }

    function addEventHandlers() {
        window.addEventListener('scroll', checkPosition);
        window.addEventListener('resize', init);
    }

    function checkPosition() {
        for (let i = 0; i < elems.length; i++) {
            const positionFromTop = elems[i].getBoundingClientRect().top;
            if (positionFromTop - windowHeight <= 0) {
                elems[i].className = elems[i].className.replace(
                    'fodder', //throw away the class
                    'quotate', //replace the class with the animation class
                );
            }
        }
    }
    return {
        init,
    };
};
animateHTML().init();

</script>
<?php
}
add_action('wp_footer', 'playon_view');

• javascript

• Sometimes when the developer panel is open, the page is not cached, so it might be a cache problem. Have you tried clearing the cache or using the incognito mode to check the results? – Johansson Commented Feb 15, 2019 at 12:27
• @JackJohansson Thanks for the suggestion, we did try incognito and that wasn't it this time! – goferstack Commented Feb 15, 2019 at 14:51

1 Answer 1

This is really more of a JavaScript question than a WordPress question. You just happen to be running it on a WordPress hook. In the future you will have better luck posting this type of question on StackOverflow.

However, I will note that document.querySelectorAll is not a live updating list. When you call it, it queries the DOM and then it's done. And since it's the first line in your init() function, before you have added any "fodder" classes, it's going to return nothing. In other words, first do addClass(), then do the query selector for them.