Shout out to @440design for the initial share of this project (https://webflow.com/website/barba-js-base-transition-webflow-reinit) that shows how to use Barba.js base transition and Webflow interactions together. This version uses Swup, a complete, flexible, extensible, and easy to use page transition library. Apart from loading the contents of the new page and replacing the required parts in DOM, Swup is built around CSS transition. The main thing that needs to be done is defining the hidden state in CSS. Read more about Swup here: https://swup.js.org/getting-started/how-it-works To see the custom code I used, you need to clone the project and look at the custom code tab in the project settings. You can not preview Swup in Webflow designer mode. To see the transition, publish and open the live site.

pagetransitions, page transition