Guest Posted October 16, 2021 Share Posted October 16, 2021 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) ); } } See the Pen wvqMrQQ?editors=1010 by ttiimmaacc (@ttiimmaacc) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 16, 2021 Solution Share Posted October 16, 2021 Hello @ttiimmaacc GSAP's ScrollTrigger is a super powerful tool to do things like these. It might really help you with this. Here is what your example could look like ( I just pushed the start and end away from the edges of the window for better visualization). See the Pen b01fd41c0a80f02caa7803c413c41e37 by akapowl (@akapowl) on CodePen Since version 3.8.0 ScrollTrigger also comes with a .isInViewport helper function - which for your needs in this case shoudln't really be neccessary though. Before taking a deeper dive into the documentation, I would suggest checking out the getting started article: 2 Link to comment Share on other sites More sharing options...
Guest Posted October 16, 2021 Share Posted October 16, 2021 Thank you @akapowl This is exactly the information I was looking for. In hindsight, I should have spent my time learning what GSAP can do rather than attempting to translate the JQuery line for line. Classic beginner goof. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now