SPageTransitionFeature

This feature allows you to add page transition to your size by using ajax requests and configurable transition effects. When inited, it will proxy all the internal links (not the _blank or links starting with http...) and make the ajax transition between pages. It also listen on the document for the location.href event and transition to the specified detail property of the event.

Platform  
js
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

Simple example

On your body tag, put the s-page-transition attribute

This website is a perfect example of this feature behavior...

This link will reload this same page using a page transition...
 

Loading code example. Please wait...

Update only a part of the page

To update only a part of the UI, simply add the s-page-transition-container="something" on the part you want to be updated

If this same container exists in the loaded page, only this part will be updated.

This website is a perfect example of this feature behavior...

This link will reload this same page using a page transition...
 

Loading code example. Please wait...

  Import

  Install

  Events

  1. s-page-transition.start

    Dispatched when a transition starts

  2. s-page-transition.end

    Dispatch when a transition ends

  3. s-page-transition.error

    Dispatch when an error occurs

  Interface

  1. patchBody
    true
    Boolean

    Specify if you want to patch the body tag with the new page body tag

  2. scroll
    false
    Boolean

    Specify if you want this feature to handle scroll to top after loading, etc...

  3. before
    Function

    Specify a function to run before the transition

  4. after
    Function

    Specify a function to run after the transition

  5. autoStyle
    true
    Boolean

    Specify if you want to automatically add classes like "s-tc:error" on the broken links (only the "a" tags)

  6. injectBrokenLinkIcon
    true
    Boolean

    Specify if you want to inject the "error" icon on the broken links

  7. brokenLinkIcon
    <i class="s-icon:link-broken-solid" alt="Broken link"></i>
    String

    Specify the icon you want to inject on the broken links

  8. ga
    true
    Boolean|String

    Specify if you want to track pages change using google analytics of not. If true, will use the config.google.ga configuration as target, otherwise you can specify the gtag universal id here...

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on