The Ultimate Webflow Component Library. Buy Forest Today.

Seemless Page Transitions in Webflow with Lottie

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
  • (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 7 page that I made

This product is not yet available. Join us on twitter for updates.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This product is not yet available. Join us on twitter for updates.