Simple jquery plugin to transition elements onto the page using CSS animations

jquery.offscreen.js

// Custom selector to find if something is in the viewport
// Adapted from https://stackoverflow.com/a/8897628/13019
jQuery.expr.pseudos.offscreen = function (el) {
    var rect = el.getBoundingClientRect();
    return (
        (rect.x + rect.width) < 0 || (rect.y + rect.height) < 0 || (rect.x > window.innerWidth || rect.y > window.innerHeight)
    );
};

jquery.sbgTransition.js

/*
 * sbgTransition plugin
 * Olly Hodgson, still writing jQuery plugins in November 2018
 *
 * Usage:
 *
 * Add class="sbg-transition sbg-transition-hidden" to the elements you want to fade in
 * Add class="sbg-transition-group" to their parent element
 *
 * Optionally, add data-timeout="1000" data-timeout-increment="500" (you can change the numbers)
 * to the sbg-transition-group element to provide a custom delay to the transitions
 *
 * You define the actual transitions in your CSS, e.g.
 *
 * .example-element.sbg-transition {
 *     opacity: 1;
 *     transition: all 0.5s ease-out;
 * }
 * .example-element.sbg-transition-hidden {
 *     opacity: 0;
 * }
 *
 */
(function ($) {
    'use strict';

    // Set up the accordion navigation
    $.fn.sbgTransitionItems = function (options) {
        // This is the easiest way to have default options.
        var settings = $.extend({}, $.fn.sbgTransitionItems.defaults, options);
        var $groups = $(this);
        $groups.each(function () {
            var $group = $(this);
            console.info($group.data("timeout"), $group.data("timeoutIncrement"));
            var customTimeout = $group.data("timeout");
            var customTimeoutIncrement = $group.data("timeoutIncrement");
            if (customTimeout !== undefined && customTimeout !== "") {
                settings.timeout = customTimeout;
            }
            if (customTimeoutIncrement !== undefined && customTimeoutIncrement !== "") {
                settings.timeoutIncrement = customTimeoutIncrement;
            }
            var items = $group.find(settings.itemSelector).filter(settings.itemHiddenSelector);
            // Do the transition immediately for things which are on screen
            doTransition(settings, items);
            // Do the transition on scroll for things which are not on screen
            $(window).scroll(function() {
                doTransition(settings, items);
            });
        });
    };

    // These are the defaults.
    $.fn.sbgTransitionItems.defaults = {
        timeout: 750,
        timeoutIncrement: 250,
        itemSelector: ".sbg-transition",
        itemHiddenSelector: ".sbg-transition-hidden"
    };

    // This removes the settings.itemHiddenSelector class from the elements in items after settings.timeout is reached
    // If there is more than one element, it'll loop through them, starting the next one after settings.timeout + settings.timeoutIncrement is reached
    function doTransition(settings, items) {
        var timeout = settings.timeout;
        for (var i = 0; i < items.length; i++) {
            // :offscreen is a custom selector, see custom.js
            if (!$(items[i]).is(':offscreen')) {
                timeout = timeout + settings.timeoutIncrement;
                //console.info(i, items[i], timeout);
                setTimeout(showItem, timeout, items[i], settings.itemHiddenSelector);
            }
        }
    }

    // Remove the className, which (via the magic of CSS transition) shows the item(s)
    function showItem(el, selector) {
        //console.info(el, selector);
        if (selector.charAt(0) === ".") {
            selector = selector.substr(1);
        }
        $(el).removeClass(selector);
    }

}(jQuery));

if (!$("body").is(".dnnEditState")) {
    // When the document is ready (and if necessary, the user has scrolled to them), show them again
    $(document).ready(function () {
        $(".sbg-transition-group").sbgTransitionItems();
    });
}

sbgTransition.css

/* Normal state */
.intro-icon-container.sbg-transition {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease-out;
}
/* Hidden state */
/* .js ensures the items are not hidden if JS is disabled */
/* body:not(.dnnEditState) makes the items visible when editing the page - only needed for DNN9 CMS */
.js body:not(.dnnEditState) .intro-icon-container.sbg-transition-hidden {
    opacity: 0;
    transform: translateY(15px);
}