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!

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.