Full Page Lottie Animated Page Transition with Smoothstate.js

Hello fellow Webflowers!

I would like to share an awesome feature that we can use, now that Webflow has released the Lottie integration.

First of I would like to give a shout out to super helpful and responsive Webflow staff (@sabanna & @tai) and to @Jeandcc all of whom were instrumental in making this a reality.

I think this will make a whole bunch of people happy (I hope) – an easy way to integrate full page animated transitions using Webflow’s built in lottie functionality and using smoothstate.js – a library allowing for flawless page transitions (so no flicker on page change).

I have used a free template from Webflow and integrated the transitions and smoothstate.js into it.

Here’s what you do:

Part I Setup the pages to work with smoothstate.js:

  • Create a div lets call it Content-Container and place it at the very top of the body. Give it a 100vw width and an ID of “main”.

  • Place whatever elements you have on the page into Content-Container in the same order as it is (nothing should change on your page)

  • Repeat steps i. and ii. on every page you want to have a transition (and use smoothstate.js)

Part II Prepare the Lottie Animations

  • Assuming that you already have uploaded your lottie json’s with a full screen transition animation, create a div, lets call it “Transition-Container”, give it: height = 0px and width = 0px, and place the lottie(s) in it and give the lotties a class of “transition” (or if you are using two separate ones use two separate classes – “transition-onLoad” and “transition-onExit” - will make it easier later when you will need to make the IX2 animations)

  • The animation that you have – will scale and stay in the same aspect ration as it was created, so to make it full screen (regardless of the aspect ratio, go to the Lottie Animation Settings (the gear icon in Designer) and add the following “Custom

    attribute: Name data-preserve-aspect-ratio Value none

  • Set the following positioning to “transition” (or if applicable transition-onLoad and transition-onExit): display = hidden; width = 100vw; height = 100vh; position = fixed; z-index = 9999 (or however high you like so long as it is on top of everything)

Part III Prepare the Hidden Buttons

  • Create two divs – call them button-page-load and button-page-exit give them height = 0px and width = 0px

  • For each of the buttons you need to make an IX2 animation. Here it all depends if you are going to use (i) 1 lottie animation that goes 0%-100 and then your reverse it 100%-0% or (ii) if you will use 2 animations both running 0%-100%.

    • Оption (i):

      • make your onLoad animation as follows –
        * lottie animation - set to 100%; set initial state
        * hide/show - set to display=block; set as “initial state”
        * lottie animation – set to 100% and chose your duration (but remember it – you will need it later)
        * hide/show – set to display=none

      • make your onExit animation as follows –
        * hide/show - set to display=block; DO NOT set it as “initial state”
        * lottie animation – set to 0% and chose your duration

        –NB Make sure that you are affecting “class” and “all elements with this class”

    • Option (ii) would a little more involved :slight_smile: (but not by much)

      • make your onLoad animation as follows:
        * hide/show - set to display=block; set as “initial state”
        * lottie animation – set to 100% and chose your duration (but remember it – you will need it later)
        * hide/show – set to display=none
        * lottie animation – set to 0% and 0 duration (to return it to the initial state for next run

      • Make your onExit animation the same way
        * hide/show - set to display=block; set as “initial state”
        * lottie animation – set to 100% and chose your duration (but remember it – you will need it later)
        * hide/show – set to display=none
        * lottie animation – set to 0% and 0 duration (to return it to the initial state for next run

      *NB Make sure that you are affecting “class” and “all elements with this class”

  • assign the correct animation to correct button :slight_smile: - self-explanatory but I can’t tell you how many times I had selected the wrong animation for the wrong button

  • select transition-container and make it into a symbol – will make it easier to replicate on every page that you have.

  • Replicate the same structure on every page, just like you did in Part I – your final structure should be the: Transition-Container Symbol and below it Content-Container with your page stuff.

Part – IV Set the custom Code – the Last part and the easiest!

  • Go to your projects “custom code” settings and add the following code to the “Footer Code” area:
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smoothstate@0.7.2/jquery.smoothState.min.js"></script>
<script>
    $(function() {
        $('#main').smoothState({
          onStart: {
            duration: 2400,
            render:function($currentTarget, $container)  {$(".button-page-exit").click()},
          },
          onAfter: function($container, $newContent) {$(".button-page-load").click(); Webflow.ready()},
        });
      });
 //  $(".button-page-load").click()  //  if you want the "onLoad" transition to run on first load uncomment this line
   </script>
  • Rememer I mentioned that you will need your animation duration? Use it (in milliseconds – 1sec=1000msec) and add it to the code in the relevant place (duration: XXXX,).

Publish and you are done! You can go to your published page and enjoy your full page lottie animated and smoothstate enabled buttery smooth page transitions!

Here is a link to the demo page that I made

12 Likes

That is super cool @IVG, thanks for sharing!

1 Like

Hey,

Thanks for sharing - this is a really cool effect. Is it possible to get a cloneable version of this please?

It is clonable - I have posted the demo site in the showcase section of webflow… you can find it there.

Got it - thanks

1 Like

Thanks @IVG. Will definitely be using this!

Awesome @IVG !! Thats great.

I would like to implement it in my project, but there’s a little case differentiation where I would need some custom code help. Probably you can take a look into it?

→ I have two kind of pages. Some with a stage, called “cover” and some without.
→ A page with cover needs a long transition with 1300ms for leaving I called the animation “leave-page-long”. Also to load this page it has to start the animation “load-page-long”.
→ A page without cover needs a short transition with 650ms for leaving. I called the animation “leave-page-short”. Also to load this page it has to start the animation “load-page-short”.

I visualized it for a better understanding.

Anybody ideas? :slightly_smiling_face:

It should be pretty straight forward unless you have too many pages… so instead of pasting the custom code into the project settings, paste the code into the each individual page “custom code section” and on relevant pages change the transition duration

So I have played around with smoothstate and I have found one problem. When you start from homepage and go to next page, the Interactions 2.0 is now disable in the div called Content-Container with an ID of “main”. Elements trigger and Page trigger doesn’t work. Did I missed something?

Same problem here, did you find a solution?

+1, I am also having the same issues. However, I did notice that my page loads will trigger after some time after. I tried looking for a trend between their actions but I couldn’t find anything consistent enough.

Really cool page loads though, I will certainly use this for static pages :slight_smile:

@IVG thanks for the great guide.

  1. What does Webflow.ready() do?
  2. It seems to stop all other code from running on page load? Without refreshing.

I have the same challange. The script disabled every all other functions etc.