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: Namedata-preserve-aspect-ratioValuenone -
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
(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
- 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
