Slater Setup
Before we dive into Barba, we need to make sure our code has a proper home. In this lesson we'll talk about where your JavaScript should live and why it matters when working with page transitions. If you're using Webflow, we'll get Slater set up. If you're not, no worries, the same principles apply to whatever setup you prefer.
Lesson Notes
Links
The problem
When using Barba, your JavaScript needs to be managed carefully. Scripts that only run on initial page load won't work. After Barba swaps in a new page, the browser doesn't re-read your code automatically.
The solution
Keep your JavaScript in one centralized place; ideally in a dedicated tool or IDE where you have full control. This makes it easier to organize, debug, and scale as your project grows. Barba requires your JavaScript to be managed in a way that supports re-initialization. Use a centralized setup that gives you full control over when and how your code runs.
For Webflow users
Avoid putting scripts in page settings or embed elements. Page settings scripts only run on initial load, and embeds are messy. The quickest way to get started is Slater, but you're free to use whatever setup you prefer.
For everyone else
If you're working in code or another platform, just make sure your scripts load properly; end of the <body> or in the <head> with a defer attribute. The concepts are the same regardless of your setup, which is explained in the video.