want single page effect in the page with scrollbar

Hey, folks as you can see that in the image I'm having the scrollbar because I have the extra content fitting not in the viewport
So, is this possible that most of the content like navbar,

Select A Server

Select A Server

remain fixed and user only can see the first three card and the extra card remain hidden and when the user scrolls the first three card gets hidden slowly and the extra card appear with a fade like transition
I think I have to use and library like Framer Motion

Squidgical•10/26/22, 4:16 PM

this is possible with 3rd party libraries, and you may even be able to do it in plain JS as it's only a single transition.

However, how will the user know they're supposed to scroll? How will this work with keyboard navigation for users who can't use a mouse? How will this work with touch events?

And more importantly, is this a good idea?

It may be more beneficial to adjust your flex/grid layout to be 4x1 on large displays, 2x2 on medium, and 1x4 on small.

For one this is easier to code (a few lines of CSS), it's intuitive to anyone who's used the internet that scrolling reveals more content here (scrollbar, clipped content), and it's significantly more performent (CSS is much faster than JS, and a few lines of CSS is orders of magnitude faster than importing a JS library and doing JS transitions).

There are cases where a scroll timeline can be a useful animation system, but it's important to remember that your users don't know anything about your site beyond what they can see, and what they know happens on most websites.
It's important to remember the user's experience, and to factor in accessibility to everything you do.

SSquidgical this is possible with 3rd party libraries, and you may even be able to do it in ...

Aditya KiradOP•10/28/22, 4:49 AM

yeah, there will be scrollbar and this will work with keyboard navigation too