Aizy

@CassieI'm sorry it wasn't the intention behind tagging you in the post. I'm new around here and bringing in my bad habits from Reddit. I'll be more considerate from now on. Thanks for the help, I used TweenMax and animated the rotation. which is close enough to what I want.

I want to create sort of an "impact effect" on my house image when the sold image finishes it's animation. I don't know how to describe it properly but I would like both the images to shake a little if that makes sense. I tried animating margin but it looked janky.

@SteveS, @GreenSock I was referring to my edited code pen where I used `scale` instead of `scaleX` and `scaleY`. The solution @SteveSprovided works the way I want. and I have marked it as a solution. Thank you.

@SteveS I've edited the codepen and added gsap.fromTo and I'm animating scale instead of padding. Now it's animating from the center but not quiet the way I want it to. I want it to expand from the center.

I am trying to replicate the button (watch how it works button) animation on this site: iBuyer.com | Sell Your House Fast With An Instant Cash Offer. . I tried animating the width and padding but I'm unable to trigger the animation from the center, mine starts from the corner as you can see. Also I am having trouble creating the first part of the animation which I believe is height being animated from 0 to something like a 100. P.S. I've added setTimeout to delay the second animation (the center text), which should only get trigger once the first two phases of the animation are completed.

Thank you so much @Cassie. You're a lifesaver.

Hi @Cassie. I ran into an issue as expected. The demo you provided works fine, I changed some stuff around to suit my needs. The only problem is that the animation is a bit fast. I want to be able to make it so that the users have to scroll a little more and could read the cards while they are scrolling. What I tried: I tried using the "ease:'power3.inOut'", I changed the "end" property to a ridiculous +30000 number which made it move slower as I wanted but introduced a lot of white space around the animation section. I also tried to add the "duration" property which didn't make any difference. I also tried changing the "stagger". Could you please edit the demo so the cards move a bit slower without adding any unnecessary white space (margin/padding) or guide me to the related documentation? Here's the updated CodePen: A Pen by aizaz (codepen.io)

Oh, you're gonna see me a lot here now .

Thanks for the help @Cassie. And yeah I agree that using Angular added a bit of overhead, I am sorry about that. The demo works perfectly according to my needs.

I've been trying to use Scrolltrigger to scroll cards horizontally. I want my cards to stack on top of each other in the center of the screen. I am using GSAP with Angular but feel free to post solutions in vanilla JS. This is the closest I've gotten to achieving the desired results, also it's broken on almost every screen size except 1920. StackBlitz URL: GSAP Scroll Trigger for stacked cards - StackBlitz https://stackblitz.com/edit/ng-zorro-antd-start-3qegqy?file=src/app/app.component.html,src/app/app.component.ts,src/app/app.component.scss [EDIT] : I am using StackBlitz instead of code pen because StackBlitz provides a working Angular environment with minimal setup required.