Add GSAP Lib and Hover Motion Gallery

assets/vendor/hover_motion/css/base.css

@@ -0,0 +1,140 @@
+:root {
+	--color-text: #292828;
+	--color-bg: #ddd;
+	--color-link: #000;
+	--color-link-hover: #000;
+	--page-padding: 1rem;
+	--angle: -15deg;
+	--trans-content: -30vh;
+}
+
+/* Page Loader */
+.as-hover-motion-gallery.loading::before,
+.as-hover-motion-gallery.loading::after {
+	content: '';
+	position: absolute;
+	z-index: 1000;
+}
+
+.as-hover-motion-gallery.loading::before {
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--color-bg);
+}
+
+.as-hover-motion-gallery.loading::after {
+	top: 50%;
+	left: 50%;
+	width: 60px;
+	height: 60px;
+	margin: -30px 0 0 -30px;
+	border-radius: 50%;
+	opacity: 0.4;
+	background: var(--color-link);
+	animation: loaderAnim 0.7s linear infinite alternate forwards;
+}
+
+@keyframes loaderAnim {
+	to {
+		opacity: 1;
+		transform: scale3d(0.5,0.5,1);
+	}
+}
+
+.as-hover-motion-gallery {
+	width: 100%;
+	height: 100vh;
+	overflow: hidden;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #000;
+}
+
+.as-hover-motion-gallery::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: url(../img/noise.png), radial-gradient(circle, #f9a13275 0%, transparent 100%);
+	background-size: 250px, 100%;
+	pointer-events: none;
+}
+
+.as-hover-motion-gallery-inner {
+	gap: 1rem;
+	flex: none;
+	position: relative;
+	width: 200vw;
+	height: 200vh;
+	display: grid;
+	grid-template-rows: repeat(5,1fr);
+	grid-template-columns: 100%;
+	transform: rotate(var(--angle));
+  	transform-origin: center center;
+}
+
+.as-hover-motion-row {
+	display: grid;
+	gap: 1rem;
+	grid-template-columns: repeat(5,1fr);
+  	will-change: transform, filter;
+}
+
+.as-hover-motion-row-item {
+	position: relative;
+}
+
+.as-hover-motion-row-item-inner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	border-radius: 10px;
+}
+.as-item-click {
+	cursor: pointer;
+}
+
+.as-hover-motion-row-item-image {
+	object-fit: cover;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.as-hover-motion-row-item-img-large {
+	width: 100vw;
+	height: 100vh;
+	top: 50%;
+	left: 50%;
+	margin: -50vh 0 0 -50vw;
+	background-position: 50% 70%;
+	will-change: transform, filter;
+}
+
+.as-hover-motion-gallery-fullview {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	z-index: 1050;
+	cursor: pointer;
+}
+.as-hover-motion-close {
+	cursor: pointer;
+}
+.as-hover-motion-gallery-fullview > .as-hover-motion-row-item-inner {
+	pointer-events: none;
+}
+.as-hover-motion-gallery-fullview .as-hover-motion-row-item-inner {
+	border-radius: 0px;
+}