Hey all! I am curious if anyone could give me some pointers and creating a page that can primarily scroll vertically but can have sections that scroll horizontally using a scroll animation trigger. Here is n example site that employs this effect a few times. https://design.devexperts.com
My main question is how do I set this up and does in need custom code. Thanks for your time!
Cheers,
Kaleb
Looking for the same - i found this example made in readymag. Note how in preview it feels and looks like a onepager, but in edit its in fact 3 pages. I can not see how they make the transitions from page 1 to 2, and from 2 to 3. The only trick i can think of is that they use some code injections - but there is nothing there as far as i can find!
Let me know if you spot it, i need to make something similar.
EDIT: I got it, if you build the sections you want to scroll horisontal as seperate pages you can do it as in the example i linked here. When you build the horisontal parts as pages, you go into “Preview” mode and select “Viewer settings”, and pick “Stack all pages vertically”.
This though is a very strange feature by readymad, since it limits the whole website to be vertically stacked if you want to do horistonal scrolled /animated modules…
Yeah I have sort of come to the same conclusion. Are you aware of any way to make a few pages continuous but not everysingle page on the site?
One way that I am doing it now is to create a new project for each page, for then to link to them. My concern with that is if there might be some issues with the domain hosting. e.g. Home page “domain.com”, contact page “domain.com/contact”
I havent used readymag before, and hope that i can host different “projects” on the same domain.
Hi @Honest_Studios and @Kare_M_Solvag. This is in fact all in Readymag and not using any code injection. You can make a continueous project by the following steps.
Preview > Viewer Settings > Stack Pages Vertically.
i found this example made in readymag
The transition from page 1 to page 2 is a fixed element with an on scroll animation. to give the appearance of a horizontal scroll. I have linked a tutorial on this affect here.
Hi @Kare_M_Solvag and @HEADLESS.HORSE,
Has either of you had any luck in finding a solution for this? I’m currently building out my portfolio which has pages stacked vertically and some specific pages scrolling horizontally. I’d love to have the option of stacking some, but not all pages vertically. I.e. I’d like all pages to stack vertically except my project pages which I don’t want to show in this “stack”, but instead would like to be accessible on clickthrough.
Hey Jan, have you found a solution for this?