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 Logan Eppley
Logan Eppley
Courses Plus Student 26,697 Points

How would I code/create page to page transitions?

I am trying to create page to page transitions with my website. How would I do this?

Any help would be great.

1 Answer

Andrew VanVlack
Andrew VanVlack
20,155 Points
Andrew VanVlack
Andrew VanVlack
20,155 Points

I know of two different methods. First is for static content/pages. You have the first page transition out and the second page transition in. So for a fade effect you:

Page 1: After clicking link, fade page content out, then act on link. Page 2: Load page content as clear, then transition fade.

It takes a combination of css and javascript to pull it off.

This page has a good layout of it: http://css-tricks.com/add-page-transitions-css-smoothstate-js/

If you are using dynamic content/pages you can just keep the user on one page, have the links react with transitions, then load the content with ajax. Though this involves writing a whole web app but whenever I see a page like this it really adds to the experience. THere may be libraries for this method.