Script is working correctly on Codepen but not on WP site

I have this codepen which works fine, but when I load it on my WordPress site it doesn’t seem to run correctly.

Here is the JS Code:

jQuery(document).ready(function() {
(function(jQuery, win) {
    jQuery.fn.inViewport = function(cb) {
        return this.each(function(i, el) {
            function visPx() {
                var H = jQuery(this).height(),
                    r = el.getBoundingClientRect(),
                    t =,
                    b = r.bottom;
                return, Math.max(0, t > 0 ? H - t : b < H ? b : H));
            jQuery(win).on("resize scroll", visPx);
})(jQuery, window);

jQuery(".kk-img").inViewport(function(px) {
    if (px) jQuery(this).addClass("vsb");
    jQuery(this).toggleClass("vsb", !!px);

jQuery(".kk-rec").inViewport(function(px) {
    if (px) jQuery(this).addClass("vsb");
    jQuery(this).toggleClass("vsb", !!px);

Also, the Console of dev tools shows no errors. Anyone has an idea of where should I be looking for to solve this issue?

Thank you for your time.

— Some more clarification —

The JS code is adding a class on some elements when these are visible on viewport. Then these elements have some transitions so that they will appear smoothly (you can check what code does on codepen link).

On my website, it is “not working” because the addClass is not added on the elements at all. And I don’t know why..

Read more here: Script is working correctly on Codepen but not on WP site

Leave a Reply

Your email address will not be published. Required fields are marked *