Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

ttiimmaacc

Members
  • Posts

    2
  • Joined

  • Last visited

Contact Methods

Profile Information

  • Location
    Australia

ttiimmaacc's Achievements

  1. 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.
  2. 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) ); } }
×