Seamless Pagetransitions | Vue.js

Hi Webflow and Community,

I just stumbled upon a great article about seamless page transitions, in this case, with Vue.js.

It instantly hit me that this is something that would fit/suite Webflow perfectly.
It’s all about (web)flow and seemless transitions to give a website a much smoother and ultimately a perfect user experience.

This is somehting Webflow could benefit from hugely!

The examples i saw where quite mindblowing and i was wondering if this is something Webflow has on the radar (as well)?

Check it out now! Page Transitions for Everyone | CSS-Tricks - CSS-Tricks

Key elements:

  • Seamless transitions between pages
  • New pages get loaded/cached while hovering over a button or while an ‘outro’ animation is going on
  • Great overall feel and a maximal smooth user experience

I think we can alreay do some things with IX2.0, but the thing i’m still missing is, f.e., the option to animate and open the new page at a specific moment in time (in the animation).

I would be even better if the new page would be loaded while running the animation, so 2 options within IX2.0 would be needed:

  1. Add a point in time to Start loading the new page (if a link is applied)
  2. Add a point in time when to open/show the new page (most often after the animation is done)

If done right, this might be (another) game-changer for Webflow.
Hope to see what the community thinks and also if WF has something like this in their Roadmap.

Cheers!

2 Likes

Hi there ,

this article also hit me … Absolutely amazing piece of end user experience …
Since then I am posting questions in the forum to see if anything similar can be achieved with turbolinks , barba.js or swup … no luck so far … but keep experimenting.

Have you attempted to do anything and you can share may be ?

this is certainly needs @brryant ‘s and Vlads’ attention … marking @PixelGeek for his awareness as well :slight_smile:

Hi logos,

Awesome i’m not the only one. (i thought that there must be more that see the potential here).

‘Unfortunately’ i’m very busy building (Webflow) sites, 2 of them with the new CSS-grid. So no time at the moment for further experimenting.

Another ‘unfortunatly’: I did use the javascript trick, which did work (but losing proper seo/link-building) but the links stopped working for me a week or two ago. Maybe i need to re-add the javascript links to temporary fix this again - but - it was also a nasty workaround - not a solid one.

We need an option for buttons/links and/or IX2.0/2.1 that includes delay-time, but keeps links properly working. With this, a complete new way of interaction is possible. After that, i would be nice to pre-cache the clicked link, so that the (preceived) site speed increases.

Please! Keep me informed of your attempts and or information.
and YES, this could really use some extra attention!

1 Like