Question

Is it possible to create a webkit page animation such that when I click a link to go to a different page, I can do a left-right wipe or right-left wipe of the new page of content, with two separate HTML files and no AJAX? Just something to fancy up the link for special cases?

So, for those who have a webkit-enabled browser, the link gets fancy. For those without, it acts like a regular link.

Bonus — also getting it to work with mozilla page animation too.

Answer 1

1. Find all external links
2. on click…
3. prevent default
4. Apply class to body element like “leaving”
5. Use that class to CSS animate page away (e.g. body.leaving { transform: translateX: -100%; }
6. When animation completes (e.g. setTimeout for same time as CSS animation) window.location to the href of the link
7. On all internal pages, have default class of “preload” on body
8. Remove that class on dom ready
9. The removing of that class does the reverse animation that the “leaving” class does, so pages slides into place.

You’d have to essentially “fade to white” in between doing it this way, but it’s close.