Jump to content
Search Community

How can I make horizontal scroll cards without moving my header and background?

enda test
Moderator Tag

Recommended Posts

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

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

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...