Stagger for child html tag of main element

[Quang Anh]

Hi. I would like know if you can use Stagger to trigger gsap function of the main html element. To make it more clear, here is my example:

<div class="home-work-image-list-top">
        <a href="#" class="wrapper-top">
          <figure class="holder">
            <img src="/img/work/dis_list-architectural-design.jpg" alt="">
          </figure>
        </a>
        <a href="#" class="wrapper-top">
          <figure class="holder">
            <img src="/img/work/dis_list-branding.jpg" alt="">
          </figure>
        </a>
        <a href="#" class="wrapper-top">
          <figure class="holder">
            <img src="/img/work/dis_list-furniture-production.jpg" alt="">
          </figure>
        </a>
</div>
<script>
gsap.from('.home-work-image-list-top .wrapper-top', {
   y: '+=400',
   duration:0.5, ease:'power2.out',
   stagger: [
   // Use the gsap that trigger the child tag of .wrapper-top, everytime .wrapper-top called out by stagger like this
     gsap.timeline()
     .fromTo(".home-work-image-list-top .wrapper-top .holder", {xPercent:-100}, {duration: 3, xPercent:0})
     .fromTo(".home-work-image-list-top .wrapper-top .holder img", {xPercent:100}, {duration: 3, xPercent: 0}, "<");
   // End
   ]
 },1)           
</script>

I know the code above wouldn't work ubt that just a way I want it to run. If anyone can solve my math I would be apreciate.

[Cassie]

Hi there,

No that's certainly not going to work - That's not valid syntax. I'm also not really sure what it is you're attempting here either? Could you explain a little more what you're hoping to acheive?

 

[Quang Anh]

Sorry for late responding. I will explain more clear: I have watch the documents about stagger and understand a little bit. As you can see in my html, I have a list of class wrapper-top, I'm using stagger to trigger animation for ".wrapper-top" in order instead of all at once. I also want to trigger animation of its .holder and img (which inside .wrapper-top) in order too but instead they run all at once. So I want to know trigger the child tag of .wrapper-top, every time .wrapper-top called out by stagger? I'm new to gsap so I'm missing something please let me know.

[GreenSock]

Perhaps you're looking for something like this?:

let stagger = 0.5;
gsap.utils.toArray('.home-work-image-list-top .wrapper-top').forEach((wrapper, i) => {
  let tl = gsap.timeline({delay: i * stagger});
  tl.from(wrapper, {y: '+=400', duration: 0.5, ease: 'power2'})
    .fromTo(wrapper.querySelector(".holder"), {xPercent:-100}, {duration: 3, xPercent:0})
    .fromTo(wrapper.querySelector(".holder img"), {xPercent: 100}, {duration: 3, xPercent: 0}, "<");
});

If you still need help, please provide a minimal demo (like a CodePen) for quick editing.