Share Posted June 8, 2022 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 - StackBlitzhttps://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. Link to comment Share on other sites More sharing options...
Solution Solution Share Posted June 8, 2022 Hi there, welcome to the GSAP forums! This question looks to be purely about the animation so posting a demo using angular is just adding a bit of overhead to the people who may want to help you. If you could use this demo as a starting point for more questions that would be hugely helpful - thanks! note: I'm using invalidateOnRefresh and functional values to make it work on different screen sizes. See the Pen wvyYvXP?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 9, 2022 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. 1 Link to comment Share on other sites More sharing options...
Share Posted June 9, 2022 Oh brilliant. Got it in one go! That's rare. Pop back if you hit any stumbling blocks, good luck with the project! 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 9, 2022 1 hour ago, Cassie said: Oh brilliant. Got it in one go! That's rare. Pop back if you hit any stumbling blocks, good luck with the project! Oh, you're gonna see me a lot here now . 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 10, 2022 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: See the Pen eYVQzpy by Aizazulhaq (@Aizazulhaq) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 10, 2022 If it's scrubbed by the scroll, the only value that will make it last longer is the end point. i.e. the distance of the scroll. Everything else, like stagger and duration will just change how the animation is spaced out over that period. Space will be automatically be added underneath to allow for the user to scroll without the content getting in the way. So if you want to avoid the seeing the space around it - you need to pin a containing element that is higher than the viewPort window. See the Pen BaYGzvR?editors=0010 by GreenSock (@GreenSock) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 10, 2022 Thank you so much @Cassie. You're a lifesaver. 1 Link to comment Share on other sites More sharing options...
Share Posted January 30 (edited) Hey, sorry if I'm not meant to bump this thread but im having difficulties with this. So what im trying to accomplish is the following: I have 2 columns. Left column is with content text. And right column is with the corresponding content images which should use scrolltrigger. I want both contents to pin for the duration it takes to show the last image on the right column. I also want the image to slide in from bottom and not from the right x-axis. This is what i have so far See the Pen gOjjyoL by kevmorales (@kevmorales) on CodePen Not sure how to fix any of that. Any help ? EDIT: I have managed to make it come from the y-axis (bottom to top) and pin the left column. same codepen Edited January 30 by Prydz answer Link to comment Share on other sites More sharing options...
Share Posted January 30 Hi there @Prydz - I just answered on the other thread you opened - lets keep the conversation over there to avoid confusion. Thanks! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now