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.

2301 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • Helped several times protecting Envato Market against copyright violations
+5 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!');
    }
  });
});
5431 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 6 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.

2301 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • Helped several times protecting Envato Market against copyright violations
+5 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

2301 posts
  • Has sold $10,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Has referred 1+ members
  • Helped several times protecting Envato Market against copyright violations
+5 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 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));
5431 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 6 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by