Speed up page-load with smoothState.js - Cloneable page

Community resources Show & Tell
1

Hi everyone,

I managed to integrate the smoothState.js plugin into WF.

Basically, smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. This is how those nice websites whose pages never seem to reload are made.

Here is its github page: GitHub - miguel-perez/smoothState.js: Unobtrusive page transitions with jQuery.

Mine is a very primitive implementation but you can see already its enormous potential. Personally, I’d like to achieve a similar end result: http://nikoskoulis.gr (just flick through the pages and you’ll see the page transition I’m talking about.

Other nice transitions can be found here: A Collection of Page Transitions

Here are two tutorials I followed to implement it:

  1. How To Add Page Transitions with CSS and smoothState.js | CSS-Tricks - CSS-Tricks
  2. (Video) Tutorial - How to Add SmoothState.js - YouTube

I’ll keep working on this for sure. Meanwhile, I’m looking for someone to jump in and contribute setting this up so as to get some nice results. Unfortunately, I’m not super familiar with JS and I just can’t take advantage of all the amazing options this plugin gives you.

Anyone interested? It’d be a fundamental addition to many WF users’ arsenal!

8 Likes
2

Ops, forgot to post the cloneable project page!

Here it is: https://webflow.com/website/smoothstatejs?s=smoothstate

1 Like
3

Hi @Omar_Melizza, this is great, thanks for sharing :slight_smile:

1 Like
4

Hi Omar,

Can you please upload the clone again? :innocent:

2 Likes
5

Hi @Omar_Melizza

Thank you.
Could you share the cloneable page again? the link seems broken.

6

Hey @Omar_Melizza could you please share the clone again because it’s not working and I could really use some help on how you implemented smoothstate.
Thanks!

1 Like