https://dialia.ai/assets/js/offcanvas.js

1// Functionality to control the overflow property of the body tag
2// when the offcanvas button is clicked, hiding the scrollbar,
3// and restoring it when the close button is clicked.
4
5let bodytag = document.querySelector('body');
6let closeBtn = document.querySelector('.close-offcanvas');
7let offcanvasBtn = document.querySelector('.open-offcanvas');
8if (offcanvasBtn) {
9  offcanvasBtn.addEventListener('click', () => {
10    bodytag.style.overflow = "auto"
11    if (bodytag.style.overflow = "auto") {
12      bodytag.style.overflow = "hidden"
13    }
14  })
15  if (closeBtn) {
16    closeBtn.addEventListener('click', () => {
17      bodytag.style.overflow = "auto"
18    })
19  }
20}
21
22
23
24// offcanvas 3 js code -------------------------------------
25function showCanvas3() {
26  var canvas3 = gsap.timeline();
27
28  canvas3.to(".offcanvas-3__area", {
29    left: 0,
30    visibility: "visible",
31    duration: 0.8,
32    opacity: 1,
33    rotationY: 0,
34    perspective: 0,
35  });
36
37  // Menu Item
38  canvas3.to(
39    ".offcanvas-3__menu ul li",
40    {
41      opacity: 1,
42      top: 0,
43      stagger: 0.05,
44      duration: 1,
45      rotationX: 0,
46    },
47    "-=0.1"
48  );
49  // Meta
50  canvas3.to(
51    ".offcanvas-3__meta",
52    {
53      top: 0,
54      visibility: "visible",
55      duration: 0.8,
56      opacity: 1,
57    },
58    "-=0.5"
59  );
60
61  // Social
62  canvas3.to(
63    ".offcanvas-3__social",
64    {
65      top: 0,
66      visibility: "visible",
67      duration: 0.8,
68      opacity: 1,
69    },
70    "-=0.5"
71  );
72}
73
74// offcanvas 3 Hide  -------------------------------------
75function hideCanvas3() {
76  var canvas3 = gsap.timeline();
77
78  canvas3.to(".offcanvas-3__area", {
79    duration: 0.8,
80    rotationY: -90,
81    opacity: 0,
82  });
83  canvas3.to(".offcanvas-3__area", {
84    visibility: "hidden",
85    duration: 0.1,
86    rotationY: 50,
87    left: 0,
88    rotationX: 0,
89  });
90
91  // Menu Item
92  canvas3.to(".offcanvas-3__menu ul li", {
93    opacity: 0,
94    top: -100,
95    stagger: 0.01,
96    duration: 0.1,
97    rotationX: 50,
98  });
99
100  // Meta
101  canvas3.to(
102    ".offcanvas-3__meta",
103    {
104      top: -30,
105      visibility: "hidden",
106      duration: 0.8,
107      opacity: 1,
108    },
109    "-=0.5"
110  );
111
112  // Social
113  canvas3.to(
114    ".offcanvas-3__social",
115    {
116      top: -30,
117      visibility: "hidden",
118      duration: 0.8,
119      opacity: 1,
120    },
121    "-=0.5"
122  );
123}
124
125