Jump to content
GreenSock

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

Search the Community

Showing results for tags 'traversedom'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

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