LoginGet started — it’s free
Made in Webflow

Page transition with Swup

1823 views
site profile thumbnail

Description

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.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
pagetransitionspage transition
© 2022 Webflow, Inc. All rights reserved.