Legacy example

This example do not use any modern javascript syntax, neither modules.
You can safely copy/paste this legacy code and use it as a starting point for playing with Barba.

Code

In a web page called index.html, put the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BarbaJS legacy example</title>
</head>
<body>

<!-- define the wrapper and the container -->
<div data-barba="wrapper">
<div data-barba="container" data-barba-namespace="page-a">
<h1>Home</h1>
</div>
</div>

<!-- load barba (UMD version) -->
<script src="https://unpkg.com/@barba/core"></script>

<!-- load gsap animation library (minified version) -->
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>

<!-- init barba with a simple opacity transition -->
<script type="text/javascript">
barba.init({
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
</script>
</body>
</html>

In order to see the opacity transition properly run, you need to add another page next this one and link them together.