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.