[Different easing for reverse()]

Holy sh*t, that did it. My man!  

I'll do a CodePen next time. Thanks! 

[Different easing for reverse()]

I did an animation timeline for a sliding menu. It works fine, however,  doing a reverse easing (when the menu slides back) seems a bit slow.  I'd like to make it go faster or just change the easing to a regular Power0.ease on reverse. 

 

$('#menu').click(function () {

$(this).toggleClass('open');

if ($('#menu').hasClass('open')) {

tlMenu.restart();

} else {

tlMenu.reverse();

}

});

 

tlMenu.to('.swiper-container', 1, { css: { marginLeft: "45%" }, ease: Expo.easeOut })

.staggerFrom("#menu li", 0.5, { opacity: 0, x: -200, ease: Back.easeIn }, 0.1, '-=1.2');

tlMenu.pause();

 

This is a great forum. I appreciate the help from last time and thank you GSAP peeps in advance

 

[How to animate child elements after their respective parent elements had been staggered and NOT after all parent elements had been staggered]

Thanks Craig! Although, I was able to read  and watch tutorials about positioning parameters before, it turns out that my animation offsets were a bit off.  I'm still getting the hang of it. Thanks again, and GSAP is fantastic.

[How to animate child elements after their respective parent elements had been staggered and NOT after all parent elements had been staggered]

I'm pretty new with GSAP, and currently in a bit of a pickle. I would really appreciate any help. I'm trying to staggerFrom 10 image containers, however each container has a child image. I need to autoAlpha each image AS SOON as its respective parent has been animated and NOT after all 10 image containers had been animated. 

 

.staggerFrom("grid-item", 1, { y:-10, ease: Back.easeIn }, 0.3)

.from("grid-item img", 1, {autoAlpha:0, ease: Back.easeIn }, 0.3)

 

Thank you!