Seamless fading page loading transitions via the Browser History API.
Teleporter brings smooth SPA-like (Single Page Application) transitions to your WordPress site. External links work as normal, but new pages on the same site are faded in magically when they are loaded and pages that have already been visited are instantly faded back in without needing to reload.
/wp-content/plugins/directory and unzip.
Once you have activated the plugin, any internal links on your site will automatically be loaded via page transitions. See the next question for what links are affected.
<a> link on the page that:
This is a comprehensive attempt to match and transition between internal links only. (If you think there is something missing here please open a Github issue.)
a link elements with an
onclick event assigned will also be detected and ignored.
Teleporter loads new content in iframes within the existing window, then uses the Browser History API to keep track of the content that is loaded. It then monitors the
onpopstate event so that browser forward and back buttons continue to load the desired content, with the added ability to fade between them.
No. Unlike similar plugins or libraries that use AJAX to retrieve new content and swap it on the current page, Teleporter uses iframes. This may seem a little counter-intuitive since iframes have been around forever and AJAX would seem to be the modern tool for the job. However, loading page content in an iframe means that any scripts loaded within that iframe are correctly loaded by the browser without fail. Using AJAX, there is a risk that the scripts in the current page and the new page are different, which could cause breakage as the new page’s scripts are not initialized along with the content, and AJAX page transitioning does not (and cannot) address this issue.
You can run Teleporter in debug mode by appending
teleporter.dev.js for testing purposes, you can reprocess that file into minified and unminified versions and debug simultaneously with