5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

I have all animation working Malforal, Jaeger suggested I delay animations until the animation div is in the viewport. SO kind of cobbling some code he offered with my existing code.

2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says
5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

Ok so I can use inview.

So his code applies to his class element fired when p class inview comes into the viewport, he triggers the text change. How do I apply that to a div? Mine being the parent div of the animaions ( div class =”la_products” ) Plus what do I shove in the bit for when it isnt in the viewport ( jQuery / javascript ) really isnt my thing.

$(function () {
  $('p.inview').bind('inview', function (event, visible) {
    if (visible) {
      $(this).text('Yay! You can see me!');
    } else {
      $(this).text('Hidden again. Muhahah!');
    }
  });
});
5313 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
  • Author had a Free File of the Month
+5 more
CodingJack says

I think the viewport thing might be a bit overkill. You’re just animating elements onto the screen right? If so, the elements only ever need to be outside the viewport by 1px. Example:

1) Div’s “left” position is “100%”, technically only offscreen by 1px.

2) The moment the above div’s “left” position becomes less than 100%, it will automatically will be inside the viewport.

2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says
Try this. Do the initial hide with CSS
#div { display: none; }
Than to unhide the div:
function showDiv() {
    $('#div').show();
}

setTimeout(showDiv, 2000);

Also what Jason is saying will work you could just animate a div and time it out for like 10 seconds also specify where it’s going to animate in from. I do this with all my templates.

Let me know if it works Lester

2163 posts
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Exclusive Author
  • Has been a member for 5-6 years
  • Sold between 10 000 and 50 000 dollars
  • Grew a moustache for the Envato Movember competition
  • Beta Tester
  • Bought between 50 and 99 items
  • Canada
Nitro_Themes says

Check it here

http://lementstudios.com/little_rock/#!/page_HOME

See how each part loads, all done with the code i added here.

$('#yourDiv').css({marginRight:-1000}).stop().delay(400).animate({marginRight:0},10000,'easeOutQuint');

Cheers

Lester

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

Cheers Lester, but that page crashes all of our devices lol, plus throws up a dozen conflict warnings at 500 errors. Perhaps you havent set correct paths for js files?

5391 posts
  • Australia
  • Bought between 100 and 499 items
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Interviewed on the Envato Notes blog
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
Australia says

I think the viewport thing might be a bit overkill. You’re just animating elements onto the screen right? If so, the elements only ever need to be outside the viewport by 1px. Example:

1) Div’s “left” position is “100%”, technically only offscreen by 1px.

2) The moment the above div’s “left” position becomes less than 100%, it will automatically will be inside the viewport.

TBH, I hadnt thought of using viewport issue. As it stands it works flawlessly, I may just ditch that whole idea. lol

36 posts
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Has been a member for 2-3 years
Jaegers says

Still doesnt work, I must be doing something fundamentally wrong :(
No, my fault. Somehow I completely forgot about events.

You can just copy paste this function and everything should work. It contains isOnScreen method, your existing code, and some my additions.

(function (window, $) {
    "use strict";
    /*jshint validthis: true*/

    $.fn.isOnScreen = function () {
        var $window, viewport, bounds;

        $window = $(window);
        viewport = {
            top : $window.scrollTop(),
            left : $window.scrollLeft()
        };
        viewport.right = viewport.left + $window.width();
        viewport.bottom = viewport.top + $window.height();

        bounds = this.offset();
        bounds.right = bounds.left + this.outerWidth();
        bounds.bottom = bounds.top + this.outerHeight();

        return !(
            viewport.right < bounds.left ||
            viewport.left > bounds.right ||
            viewport.bottom < bounds.top ||
            viewport.top > bounds.bottom
        );
    };

    var $boxes = $(".box").hide();

    function animateBox() {
        var $this = $(this),
            time = $this.attr('data-time'),
            name = $this.attr('data-animate');

        window.setTimeout(function () {
            $this.show().addClass(name);
        }, time);

    }

    function animateBoxes() {
        if ($boxes.isOnScreen()) {
            $boxes.each(animateBox);
        }
    }

    $(window)
        .scroll(animateBoxes)
        .resize(animateBoxes);

}(this, this.jQuery));
5313 posts The Dude Abides
  • United States
  • Exclusive Author
  • Has been a member for 5-6 years
  • Elite Author
  • Bought between 100 and 499 items
  • Referred between 100 and 199 users
  • Author had a Free File of the Month
+5 more
CodingJack says

TBH, I hadnt thought of using viewport issue. As it stands it works flawlessly, I may just ditch that whole idea. lol

I didn’t realize the check was related to the page’s scroll position. In that case, it makes perfect sense to check if they’re inside the viewport.

by
by
by
by
by
by