├── about.html
├── index.html
├── main.css
└── main.js
/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Page Transition Using BarbaJS & GSAP
6 |
7 |
8 |
9 |
10 |
13 |
14 |
15 |
23 |
24 |
25 |
26 |
27 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Page Transition Using BarbaJS & GSAP
6 |
7 |
8 |
9 |
10 |
13 |
14 |
15 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | background: #161616;
6 | color: white;
7 | }
8 |
9 | .loading-screen {
10 | position: relative;
11 | padding-left: 0;
12 | padding-right: 0;
13 | padding-top: 0;
14 | background-color: #4bedc2;
15 | width: 0%;
16 | height: 100%;
17 | }
18 |
19 | .load-container {
20 | position: fixed;
21 | top: 0;
22 | left: 0;
23 | width: 100%;
24 | height: 100vh;
25 | overflow: hidden;
26 | z-index: 10;
27 | pointer-events: none;
28 | }
29 |
30 | h1 {
31 | position: absolute;
32 | top: 38%;
33 | left: 50%;
34 | transform: translate(-50%, -50%);
35 | font-family: "Cosi Azure";
36 | font-size: 84px;
37 | }
38 |
39 | .button {
40 | position: absolute;
41 | top: 60%;
42 | left: 50%;
43 | transform: translate(-50%, -50%);
44 | }
45 |
46 | .button a {
47 | font-family: Arial, Helvetica, sans-serif;
48 | text-decoration: none;
49 | color: white;
50 | border: 1px solid white;
51 | padding: 24px 40px;
52 | text-transform: uppercase;
53 | letter-spacing: 4px;
54 | font-size: 10px;
55 | transition: 0.3s;
56 | }
57 |
58 | .button:hover a {
59 | background: white;
60 | color: #161616;
61 | transition: 0.3s;
62 | }
63 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | function delay(n) {
2 | n = n || 2000;
3 | return new Promise((done) => {
4 | setTimeout(() => {
5 | done();
6 | }, n);
7 | });
8 | }
9 |
10 | function pageTransition() {
11 | var tl = gsap.timeline();
12 | tl.to(".loading-screen", {
13 | duration: 1.2,
14 | width: "100%",
15 | left: "0%",
16 | ease: "Expo.easeInOut",
17 | });
18 |
19 | tl.to(".loading-screen", {
20 | duration: 1,
21 | width: "100%",
22 | left: "100%",
23 | ease: "Expo.easeInOut",
24 | delay: 0.3,
25 | });
26 | tl.set(".loading-screen", { left: "-100%" });
27 | }
28 |
29 | function contentAnimation() {
30 | var tl = gsap.timeline();
31 | tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
32 | }
33 |
34 | $(function () {
35 | barba.init({
36 | sync: true,
37 |
38 | transitions: [
39 | {
40 | async leave(data) {
41 | const done = this.async();
42 |
43 | pageTransition();
44 | await delay(1000);
45 | done();
46 | },
47 |
48 | async enter(data) {
49 | contentAnimation();
50 | },
51 |
52 | async once(data) {
53 | contentAnimation();
54 | },
55 | },
56 | ],
57 | });
58 | });
59 |
--------------------------------------------------------------------------------