Streaming live at 10am (PST)

How would I build this "wipe" layout?

Hello,

I prototyped a portfolio in Adobe XD and am now scratching my head about how to build it in Webflow.

Basically, I’m a writer and a UX Designer. I want to redesign my portfolio to show a split between these two aspects.

Before I really get stuck into this, I’m wondering about the logic:

Do I create a “Writing” page and a “Design” page, and then create a loading animation for each?

Or do I create one page with each section pushed out of the visible area and use interactions to swipe them across?

I think option 2 is the better one, but is this practical or possible?


Here is my read-only link: https://preview.webflow.com/preview/portfolio-62cbbe?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-62cbbe&preview=a1a712fa92b1f301acc20e25b8debadd&mode=preview

public share link: https://portfolio-62cbbe.webflow.io/

The latter. And it is practical and possible. It would be a long tutorial to have to explain it. You’re on the right track. Once you’re a little bit further along and get stuck I would ask a more pointed question then. Best.

Cool, thanks John. I just wanted to save myself a little time before I dive headfirst into this. It will be my first webflow project, so I’m still working out what can and can’t be done.

So essentially, would it be something like this? Stick all the “writing” case studies in one div, and the “design” case studies in another div, offset them, and use the main DESIGN/WRITING links to trigger an animation that moves them across?

I know I’m going to run into difficulties with position and getting things to float properly, but I’ll cross that bridge when I come to it.

Final question: will this be too heavy or difficult to load?

Mardol,

Yes, that’s one way to do it. You can also do the main layout work with flexbox. Part of the difficulty in answering this is exactly how you want things to stack and overlap and how important each of those components are (that you showed in your mockup).

No, it shouldn’t be too heavy. Just remember, you want to try to animate only transform and opacity properties (https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/). Also if you have to animate multiple properties, stagger them so that they’re not all executing at the same time. Feel free to come back with any questions or design feedback once you’ve done some more work.