enda Posted December 21, 2021 Share Posted December 21, 2021 my sample Hi,there! I'm currently working on my personal project with React. and I wanted to make horizontal scroll cards. I firstly referenced your's the 'Infinite Scrolling Cards' example below. I've just modified it a little bit so that I can apply it to React.(to see how it works) What I want is that my header doesn't move, and also my background doesn't move either, while the cards animation are working. But When I scroll it, they are moved to upper side.(I put on my sample to the top!! ) I tried making an another box which wraps the pin for ScrollTrigger , so that it only move inside of the box and other stuff(my header and background) doesn't move. (I can't use `position:fixed` for my header, as I did other works for other components, my header is connected to other components as well) Is there any way the horizontal scroll animation only works inside of any box, not in the 100% viewport size box(?) Also for some reason, the scroll position is not reversed when I scroll it to the end,(but when I scroll it to the start position, it's reversed to the end position) I'm still learning about coding, If someone can helps me I would really appriciate it🙂 See the Pen LYRwgPo by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 21, 2021 Share Posted December 21, 2021 Hi there enda! If you don't mind I'm going to skip over the react demo and just use the vanilla JS one as the things you're struggling with are styling issues and React is just going to add another layer of complexity. You're pinning the #gallery element - so If you want a background add it to that section instead. You can also change the width of the gallery section to whatever you like, but you might want to change the widths of the cards too and adjust the distance they're animating. If you want a fixed header - you're looking for position:fixed See the Pen MWEvVPP by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted December 21, 2021 Share Posted December 21, 2021 edit - I just saw you can't use position fixed. If that's out, then add your header inside the pinned section (gallery) Link to comment Share on other sites More sharing options...
enda Posted December 22, 2021 Author Share Posted December 22, 2021 Hello Cassie! Thanks for your help!👍 But there are some things that I wanted to do What if I can't put background in the pin, and I just need to use real background what my root component has? (So, I can't change any background style for only the cards page, I have to use the root's one) Also, As the header is shared for other page as well, I can't put my header inside the pinned section.. The codepen one moves scroll to the end and start position both properly, but for some reason, my react demo doesn't move scroll from the end to start😭 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