[Wave effect on list items while scrolling]

Hi. Thank you @iDad5. Your codepen is really helping me a lot last time, I was able to figure out a way to make it smoother by adding some CSS transitions. Now I just want to ask can you do it the same but in sideway horizontal, and also change from scrolling to draging with mouse? I want to apply to slider image. I figure I can use Observer type "touch and pointer", change a velocity and moving from Y to X axis but it still needs more modifies.

[Stagger for child html tag of main element]

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.

[Stagger for child html tag of main element]

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.

[Wave effect on list items while scrolling]

I see, thank you everyone for helping me this question. Thank you @akapowl for providing an article, I may figure out from here. 🙇‍♂️

[Wave effect on list items while scrolling]

Hello. I'm new to GSAP and I have a question. I have a list of items like this example site, and I want to make a "wave effect" that apply to picture items everytime I scroll. I figured out the scrolling part with ScrollTrigger onUpdate but the animated effect is very hard to understand to do. Can GSAP do like in the example, maybe a demo so I can understand more.
My gsap code:

let proxy = { scale: 1 };
let clamp = gsap.utils.clamp(-1.2, 1.2);

ScrollTrigger.create({
  onUpdate: (self) => {
    let scale = clamp(Math.abs(self.getVelocity()));
    proxy.scale = scale;
    //my gsap function
  }
});

gsap.set(".list .item .image", {transformOrigin: "center center", force3D: true});

The example site:
https://bbdo.de/work 
Thank you!