Help with portfolio website animations

Help with portfolio website animations

Hey guys, I’m currently in the process of migrating my archaic PDF portfolio (I’m an architect, just now getting into web design) into a fancy website. What I have here is a first draft of the main page.

The idea is that this hub will take you to the various bits of information by clicking the arrows (there’s a picture of me in the center and a fancy background which are not there since they are hosted locally and just uploaded the thing to codepen real quick for this post) (also it’s in Spanish right now but u get the point).

What I want is for the arrow clicks to trigger an animation that moves the whole thing to the left, right, up or down and takes you to the desired sector, including the background image, which I designed big enough to move too. I have some ideas of how I could do it with CSS animations or some JavaScript but I am really wondering if anyone could tell me the best way to do it and overall give me some advice since I haven’t tried such large animations before. Is there a library to make this easier? Googling animation stuff gets me so much content that I get confused.

Check this out, it might help you:

Thanks, this is giving my main hub the animations I needed! Now I need to figure out how to populate the new sectors of the page without completely ruining the flow of the document, but that’s a whole other problem for tomorrow.