5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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.

2204 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
  • Sells items exclusively on Envato Market
+4 more
Nitro_Themes says
5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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!');
    }
  });
});
5360 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 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.

2204 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
  • Sells items exclusively on Envato Market
+4 more
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

2204 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Helped several times protecting Envato Market against copyright violations
  • Sells items exclusively on Envato Market
+4 more
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

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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?

5492 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Located in Australia
  • Has sold $1,000+ on Envato Market
+4 more
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
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Has been part of the Envato Community for over 2 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));
5360 posts The Dude Abides
  • Located in United States
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
+9 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