Animate element when in viewport with isVisible?

[jesperlandberg]

Hi, thanks for a great plugin.

Is it possible to get an example on how I would animate elements when they come into the viewport? I Guess i use isVisible but I can't get it to work.

[...document.querySelectorAll('.animate-this')].forEach((el) => {
 scrollbar.isVisible(el) ? el.classList.add('is-visible') : false 
})

[idiotWu]

Here's an old demo about isVisible method: http://jsbin.com/noxoho/edit?js

Hope it could help you :)

[jesperlandberg]

@idiotWu thanks, perfect=)

[adamwright32]

@idiotWu This only fires when you interact with the scrollbar, what about if the element is at the top of the page or partially showing? try to get some functionality similar to waypoint.js

[idiotWu]

@adamwright32 I don't understand what you mean by "interact with the scrollbar". The scrollbar.isVisible() method just simply compares the bounding rect of the given element with the bounding rect of scrollbar:

smooth-scrollbar/src/geometry/is-visible.ts

Lines 3 to 14 in 8ff9227

	export function isVisible(scrollbar: I.Scrollbar, elem: HTMLElement): boolean {
	const { bounding } = scrollbar;
	const targetBounding = elem.getBoundingClientRect();
	// check overlapping
	const top = Math.max(bounding.top, targetBounding.top);
	const left = Math.max(bounding.left, targetBounding.left);
	const right = Math.min(bounding.right, targetBounding.right);
	const bottom = Math.min(bounding.bottom, targetBounding.bottom);
	return top < bottom && left < right;
	}

[adamwright32]

@idiotWu but thats only triggered when you are listening to the scrollbar. So if the page loads and you don't scroll it won't fire. Or maybe i'm doing it wrong

scrollbar.addListener(function (status) {
            // Content Feature Header
            $(".js-header").each(function () {
                var $this = $(this);

                if(scrollbar.isVisible(this))
                {
                    $this.addClass("animated titleInRight");
                }
            });

[idiotWu]

@adamwright32 no you don't have to put it in the scroll listener. It's a static check and you can run it everywhere.

[DanTabib]

@idiotWu

Is there a way for scrollbar.isVisible(element) to check if the element isVisible on page load without scrolling?

Reference example: http://jsbin.com/hujugirexi/edit?html,js,output (I re-ordered the divs in your previous example, such that "content" is on top). "content" only shows "visible: true" when scrolling at least once (even though it is visible upon page load).

Thanks for the help.

[idiotWu]

@dtab428 simply call isVisible() at anywhere you want

[vm84]

Hi, can you please give us an example on windows load?