├── README.md
├── final
├── assets
│ └── exit.svg
├── index.html
├── main.js
└── styles.css
└── starter
├── assets
└── exit.svg
├── index.html
├── main.js
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # GSAP Menu Tutorial
2 | Code For [YouTube Tutorial](https://youtu.be/5mf5K8d3MUk)
3 |
4 | 
5 |
6 |
--------------------------------------------------------------------------------
/final/assets/exit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/final/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Menu Tutorial
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/final/main.js:
--------------------------------------------------------------------------------
1 | const menuBtn = document.querySelector(".menu-div");
2 | const exitBtn = document.querySelector(".exit");
3 |
4 | let t1 = gsap.timeline({ paused: true });
5 | t1.to(".menu", { opacity: 1, duration: 1, top: 0, ease: Power2.easeInOut });
6 | t1.to(
7 | ".nav",
8 | {
9 | opacity: 1,
10 | marginBottom: 0,
11 | duration: 1,
12 | ease: Power2.easeInOut,
13 | stagger: 0.3,
14 | },
15 | ">-0.5"
16 | );
17 |
18 | menuBtn.addEventListener("click", () => {
19 | t1.play().timeScale(1);
20 | });
21 |
22 | exitBtn.addEventListener("click", () => {
23 | t1.timeScale(2.5);
24 | t1.reverse();
25 | });
26 |
--------------------------------------------------------------------------------
/final/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | font-family: "Poppins", Arial;
8 | }
9 |
10 | body {
11 | background-color: rgb(16, 16, 16);
12 | color: white;
13 | }
14 |
15 | ul {
16 | list-style: none;
17 | }
18 |
19 | .logo {
20 | font-size: 2rem;
21 | }
22 |
23 | .home {
24 | display: flex;
25 | justify-content: space-between;
26 | padding: 50px;
27 | }
28 |
29 | .menu-div {
30 | cursor: pointer;
31 | transition: all 0.2s ease-in-out;
32 | }
33 |
34 | .menu-div:hover {
35 | color: gray;
36 | transition: all 0.2s ease-in-out;
37 | }
38 |
39 | /* Menu Stuff */
40 |
41 | .menu {
42 | opacity: 0.3;
43 | width: 100%;
44 | height: 100vh;
45 | display: flex;
46 | flex-direction: row;
47 | justify-content: space-between;
48 | padding: 0px 50px;
49 | position: fixed;
50 | top: -100%;
51 | align-items: center;
52 | background-color: rgb(39, 39, 39);
53 | }
54 |
55 | .nav {
56 | opacity: 0;
57 | margin-bottom: -20px;
58 | }
59 |
60 | .nav-link {
61 | color: white;
62 | text-decoration: none;
63 | font-size: 3rem;
64 | transition: all 0.2s ease-in-out;
65 | }
66 |
67 | .nav-link:hover {
68 | color: gray;
69 | transition: all 0.2s ease-in-out;
70 | }
71 |
72 | .background {
73 | position: absolute;
74 | font-size: 15rem;
75 | font-weight: 600;
76 | color: rgba(235, 235, 235, 0.04);
77 | user-select: none;
78 | z-index: 1;
79 | }
80 |
81 | .small-number {
82 | font-size: 1.2rem;
83 | }
84 |
85 | .exit {
86 | cursor: pointer;
87 | position: absolute;
88 | right: 40px;
89 | top: 40px;
90 | }
91 |
92 | .title {
93 | font-size: 2rem;
94 | color: rgb(170, 151, 126);
95 | }
96 |
97 | .right {
98 | padding-right: 100px;
99 | }
100 |
101 | .information {
102 | margin-bottom: 24px;
103 | }
104 |
105 | .menu-container {
106 | z-index: 3;
107 | }
108 |
109 | .social-medias > a {
110 | color: white;
111 | text-decoration: none;
112 | text-transform: uppercase;
113 | font-size: 0.9rem;
114 | letter-spacing: 1px;
115 | }
116 |
117 | /* Media Query */
118 | @media screen and (max-width: 660px) {
119 | .menu {
120 | flex-direction: column;
121 | justify-content: center;
122 | }
123 |
124 | .right {
125 | display: none;
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/starter/assets/exit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/starter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Menu Tutorial
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/starter/main.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andrewwoan/gsap-menu-tutorial/5ff6ccffb52e2ee549bf08e8fd22e2e0379274a8/starter/main.js
--------------------------------------------------------------------------------
/starter/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | font-family: "Poppins", Arial;
8 | }
9 |
--------------------------------------------------------------------------------
