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

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

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

    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 {

add_action('wp_footer', 'playon_view');
  • 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.

  • Brilliant! That did the trick, and thank you for suggesting future use of StackOverflow for questions like this!
    – goferstack
    Commented Feb 15, 2019 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.