staggered scrolltrigger - hidden child causes delay

[fraserYT]

I have a horizontal menu on my page. as you scroll down the page, the menu items animate up and fade out with a stagger. This all worked really smoothly until I added a submenu to one of the menu items.

 

Even though the submenu is hidden until the menu item is hovered or clicked, it breaks the uniform stagger. In my codepen, the submenu is on the calender icon (third menu item). you'll notice the first three items animate in uniform, then there is a delay after the calendar, then the last three animate in uniform. This only happens when the submenu is present. The delay is more noticeable on my actual page with the real content than it is in codepen with the dummy data.

 

Is there a way to tell scrolltrigger to ignore any children? I tried using the css 'not' property, (gsap.to('.header-icons div:not(.submenu') but that didn't make a difference. 

See the Pen KKYEyzp by Fraser-Smith-fraserYT (@Fraser-Smith-fraserYT) on CodePen

[Rodrigo]

Hi @fraserYT and welcome to the GSAP Forums!

 

You are using an extremely generic selector. I'd strongly recommend you to use a unique class in your elements even if it doesn't have any styles, just for selecting purposes. This seems to work the way you expect:

<div class="header-icons">
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
  <div class="menu-item"></div>
</div>

gsap.to(".header-icons .menu-item", {
  opacity: 0,
  y: -80,
  stagger: 0.1,
  scrollTrigger: {
    trigger: ".full-row",
    start: 0,
    end: 230,
    scrub: 0.5,
    markers: true
  }
});

Here is a fork of your demo:

See the Pen oNOVqKm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[PointC]

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class.

gsap.to('.header-icons > div', {

Happy tweening.

[fraserYT]

Amazing!

That makes perfect sense. I can't believe I didn't think of that myself. It's working perfectly now. Brilliant end to a Friday afternoon!

 

Thank you both so much!