Search the Community

I'm attempting to translate this jQuery code to Vanilla JS and replacing .find() has me stumped. I'm trying to select all elements with class ".find-my", loop over each element to Stagger through it's descendants "span" when in view port. Using helper method "isInViewPort()" I can select a single element with .querySelector() but .querySelectorAll() throws error "getBoundingClientRect is not a function" Can I correctly use .selector() utility to animate all descendant elements of parent div ".find-my" Is there a better way to use GSAP to check if elements are in the viewport? CodePen jQuery Code: (Commented out in CodePen) var $window = $(window); $window.scroll(function() { triggerMessage(); }); function triggerMessage() { $('.find-my').each(function() { let $findMy = $(this); let $keys = $findMy.find('span'); let $reverseKeys = $findMy.find('span'); if($findMy.hasClass('animated')) { if(!isInViewport($keys, false)) { TweenMax.killTweensOf($keys); TweenMax.staggerTo($reverseKeys, 0.3, { opacity:0 }, 0.1); $findMy.removeClass('animated'); } } else if(isInViewport($keys, true)) { if(!$findMy.hasClass('animated')) { TweenMax.killTweensOf($reverseKeys); TweenMax.staggerTo($keys, 0.3, { opacity:1 }, 0.1); $findMy.addClass('animated'); } } if(isInViewport($keys, true)) { if(!$findMy.hasClass('animated')) { TweenMax.killTweensOf($reverseKeys); TweenMax.staggerTo($keys, 0.3, { opacity:1 }, 0.1); $findMy.addClass('animated'); } } else { if($findMy.hasClass('animated')) { TweenMax.killTweensOf($keys); TweenMax.staggerTo($reverseKeys, 0.3, { opacity:0 }, 0.1); $findMy.removeClass('animated'); } } }); } function isInViewport(el) { if(typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); if(el) { return ( rect.top >= ((window.innerHeight*0.25) || (document.documentElement.clientHeight*0.25)) && rect.left >= 0 && rect.bottom <= ((window.innerHeight*0.75) || (document.documentElement.clientHeight*0.75)) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } else { return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } }