Discover the best barbajs websites created by professional designers. Get inspired and start planning your perfect barbajs web design today!

I'd like to share with you my first study project. This project shows how to use Barba.js base transition and Webflow interactions together. I spent a few weeks searching for the right parts of custom code and understanding the processes in general. I'll be very grateful for your likes of this project.
To see the custom code I used you need to clone the project and look at the custom code tab in the project settings.
I'll add a project with a custom Barba.js transition soon, so subscribe to my Webflow profile to make sure you don't miss anything.

Barba.js doesn't work in webflow project preview mode.
To see the transition open the live site.

Barba.js base transition + Webflow reinitialization v1.00

Barba JS Base Transition Webflow Reinit

Code is in the Project Settings Footer Code.
Based on https://likely-story.co.uk/
Made with https://barba.js.org/ and https://greensock.com/
Note that Webflow interactions will not work on newly visited pages when using Barba.js

Likely Story

ClipPath Page Transition

We are a digital design studio driven by research & strategy. Helping brands connect with their audience using in-depth research, rigorous strategy, design and well-built technology.

DashDigital® Studio

In this episode of What In Webflow 017, we walk-through how to create a page transition in Webflow using Barba JS

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Barba-JS-Page-Transition

---

Live site - https://phone-app-page-transition.webflow.io/

Read-only link - https://preview.webflow.com/preview/c...

Clone link - https://webflow.com/website/Barba-JS-Page-Transition

---

Layout designed by https://dribbble.com/gabebecker

Barba JS landing page: http://barbajs.org/index.html

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Phone App Page Transition

Barba JS Page Transition

Here's a free-to-use page transition using a snippet of custom piece of code to allow for the animation to happen.

This project was created as part of Webflow Copenhagen's MeetUp #4.

//

Watch the recording of the MeetUp here where we go over how to make page transitions like this
https://webflow.zoom.us/rec/share/39RzFLWq7F5LEpHKxFHuA_4kHoPGeaa8hHQd-aAKyUuAQLwFkxzwpEUdvrwxQYZ4

//

Created by Emil Villumsen
https://twitter.com/EmilVillumsen

//

MeetUp group 
https://www.meetup.com/Copenhagen-Webflow-Meetup/

Masked out page transition | Webflow CPH #4

Smooth Transition between pages, made using Barba JS (latest version).

It was inspired by Kirschberg website https://kirschberg.co.nz and a continuation from Tim. Ricks @tricks Liquid Nav https://webflow.com/website/Liquid-Nav-Links

Feel free to clone, and like if you find this helpful! Oh and make sure to open it in LIVE SITE

Update: The code should be in the Project Settings > Custom Code > Before End of Body tag

Barba JS (Page Transition)

• Unique Transitions Per Page • Keep Webflow Interactions (excluding page load interactions)

Barba.js Keep Webflow Interactions

Here's a free-to-use page transition using a snippet of custom piece of code to allow for the animation to happen.

This project was created as part of Webflow Copenhagen's MeetUp #4.

//

Watch the recording of the MeetUp here where we go over how to make page transitions like this
https://webflow.zoom.us/rec/share/39RzFLWq7F5LEpHKxFHuA_4kHoPGeaa8hHQd-aAKyUuAQLwFkxzwpEUdvrwxQYZ4

//

Created by Lars Hartmann
http://www.larshartmann.dk/

//

MeetUp group 
https://www.meetup.com/Copenhagen-Webflow-Meetup/

// 
Design inspiratation
https://www.robby.rent/bio/

Fade and rotation

Fade and rotation page transition | Webflow CPH #4

Three custom Barba.js page transitions to clone! The code uses a mix of Barba, Gsap timelines and some vanilla javascript.

Enjoy :) Press like so I know you want me to make more of these!

Barba Js Transitions | Volume I

Barba.js Transitions | Volume I

Updated portfolio: Dark– / Light mode compatible

—

I am a self-taught multidisciplinary designer (based on curiosity) — working within the field of strategic business development. I strive to define and solve my client's issues and optimize their commercial existence by diligently focusing on creating a highly converting outcome for my client's business and their user's needs.

Design is all about solving a problem — that can only happen with a strategic approach to every decision. I'm designing and developing based on breaking down business objections and user needs. That will always make a converting result that provides happy customers for your users and a strong visual presence for your brand.

My competencies combine business strategy, digital development, and design, making me capable of creating truly innovative solutions for businesses to thrive in a competitive market.

Krause Studio™

Krause Studio™ (Dark-mode compatible)

Barba.js for fluid and smooth transitions while keeping your Webflow interactions.
Click on "Learn More" to go to the next page.

OpenAI

Barba.js (Smooth Page Transiton)

* CMS video backgrounds
* BarbaJS transitions
* Multilanguage
* News collection, case collection, team member collection
* Page load effects
* LazyLoad integration
* Animated CSS grain
* Scale animations

Feel free to ask about the project :)

Discover barbajs websites built by the Webflow community

Discover barbajs websites built by the Webflow community