Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Catherine Wentworth
Catherine Wentworth
7,411 Points

Directional Page Transitions

I'm designing a simple portfolio site. It's 3 pages:

ABOUT <-> HOME <-> PORTFOLIO

I want to add page transitions that slide in left and right as if the three pages were all sitting next to one another in the order above.

Meaning, the HOME page will slide in from the right if you click the home link while you are on ABOUT (which is the left-most page), but it will slide in from the left if you click it while you are on PORTFOLIO (which is the right-most page). But since ABOUT is the left-most page, it will always slide in from the left, and vice versa for PORTFOLIO.

BONUS if you can tell me how the header/logo and nav links might stay static (these elements are the same for all the pages) while the specific contents of each page slide in underneath.

Thanks for the help!

1 Answer

Steven Parker
Steven Parker
231,108 Points
Steven Parker
Steven Parker
231,108 Points

I'll assume you can already make page transitions but you want to change the direction based on the previous page. Most browsers provide a local storage facility you can access from JavaScript. Using that, one page could leave some data the next one could use to perform the correct transition. But you could also do this more simply by having different versions of the page that slide from different directions and just link the appropriate one.

With JavaScript, you can also replace portions of a page while leaving others intact. This is done with a mechanism callad AJAX.

Catherine Wentworth
Catherine Wentworth
7,411 Points

Thanks, Steven!