Quang Anh

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.

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.

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.

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

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!