Jump to content
Search Community

Loop over element, select and animate all descendants

Guest
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

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:

 

 

  • Like 2
Link to comment
Share on other sites

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.

59349318.jpeg

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...