GSAP 3 Cube Walk

gsap-3-cube-walk.markdown

GSAP 3 Cube Walk

A Pen by Pete Barr on CodePen.

License.

index.html

<div class="container">
	<div class="scene">
		<div class="track">
			<div class="walker walker--1">
				<div class="cube cube--1">
					<div class="face face--front"></div>
					<div class="face face--back"></div>
					<div class="face face--left"></div>
					<div class="face face--right"></div>
					<div class="face face--top"></div>
					<div class="face face--bottom"></div>
				</div>
				<div class="cube cube--2">
					<div class="face face--front"></div>
					<div class="face face--back"></div>
					<div class="face face--left"></div>
					<div class="face face--right"></div>
					<div class="face face--top"></div>
					<div class="face face--bottom"></div>
				</div>
			</div>
			<div class="walker walker--2">
				<div class="cube cube--1">
					<div class="face face--front"></div>
					<div class="face face--back"></div>
					<div class="face face--left"></div>
					<div class="face face--right"></div>
					<div class="face face--top"></div>
					<div class="face face--bottom"></div>
				</div>
				<div class="cube cube--2">
					<div class="face face--front"></div>
					<div class="face face--back"></div>
					<div class="face face--left"></div>
					<div class="face face--right"></div>
					<div class="face face--top"></div>
					<div class="face face--bottom"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="collection">
	<a class="collection__link" href="https://codepen.io/collection/02388423440b98155f8e4002bde094f2" target='_blank'>View the collection<span></span></a>
</div>

<a href="https://greensock.com" target="_blank"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150" /></a>

script.js

console.clear();

var styleVars = getComputedStyle(document.documentElement),
	cubeWidth = styleVars.getPropertyValue('--cube-size').replace("px", ""),
	stepDuration = 0.6;

gsap.set('.container', { y: "10vh" });

function walk() {
	gsap.timeline({ repeat: -1, defaults:{ ease:"power2.inOut", duration:stepDuration }})
		.to('.cube--2', { rotationZ: -180, transformOrigin: "left top" })
		.set('.cube--2', { x: -cubeWidth*2, transformOrigin: "right top" })
		.to('.cube--2', { rotationZ: -360 })
		.to('.cube--1', { rotationZ: -180, transformOrigin: "left top" })
		.set('.cube--1', { x: -cubeWidth*2, transformOrigin: "right top" })
		.to('.cube--1', { rotationZ: -360 })
		.to('.track', { x: cubeWidth*2, duration: stepDuration*4, ease: "none" }, 0)
}

function intro() {
	gsap.timeline({ onComplete: walk, delay: 0.5, defaults:{ ease:"power1.in" } })
		.set('.container', { autoAlpha: 1 })
		.from('.cube--1', { scaleY: 0, x: -cubeWidth*2, transformOrigin: "50% 100%", duration: 0.3 })
		.to('.cube--1', { keyframes:[{ y: -cubeWidth*2, ease: Power2.easeOut, duration: 0.4 }, { y: 0, ease: "power2.in" }]})
		.from('.cube--2', { scaleY: 0, x: cubeWidth*2, transformOrigin: "50% 100%", duration: 0.3 }, 0.1)
		.to('.cube--2', { keyframes:[{ y: -cubeWidth*2, ease: Power2.easeOut, duration: 0.4 }, { y: 0, ease: "power2.in" }]}, 0.4)
		.to('.track', { rotationY: 360, duration: 1.2, ease: "power4.inOut" }, 0)
		.from('.face', { opacity: 0, duration: 1.2, ease: "power2" }, 0)
}

window.onload = (event) => {
	intro();
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.0/gsap.min.js"></script>

style.scss

:root {
	--cube-size: 120px;
}

html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	background: white;
	background: radial-gradient(#ffffff 25%, #d5d3d5 75%);
	overflow: hidden;
	font-size: 10px;
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: auto;
	perspective:800px;
	visibility: hidden;
}

.scene {
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(55deg);
}

.track {
	transform-style: preserve-3d;
}

.walker {
	transform-style: preserve-3d;
	position: relative;
	display: flex;
}

.walker--2 {
	transform-style: preserve-3d;
	transform: rotateX(180deg) translateY(-1px);
	
	.face {
		opacity: 0.6;
	}
	
	.cube--1 .face {
		background: #f6edf0;
	}
	
	.cube--2 .face {
		background: #eaebf1;
	}
}

.cube {
	position: relative;
	width: var(--cube-size);
	height: var(--cube-size);
	transform-style: preserve-3d;
}

.face {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.face--front {
	transform: translateZ(calc(var(--cube-size)/2));
}

.face--back {
	transform: translateZ(calc((var(--cube-size)*-1)/2)) rotateY(180deg);
}

.face--left {
	transform: translateX(calc((var(--cube-size)*-1)/2)) rotateY(-90deg);
}

.face--right {
	transform: translateX(calc(var(--cube-size)/2)) rotateY(90deg);
}

.face--top {
	transform: translateY(calc((var(--cube-size)*-1)/2)) rotateX(90deg);
}

.face--bottom {
	transform: translateY(calc(var(--cube-size)/2)) rotateX(-90deg);
}

.cube--1 {
	.face {
		background: rgba(#dc1857, 0.8);
	}
	.face--front, .face--back {
		background: rgba(#8c1950, 0.8);
	}
	.face--left, .face--right {
		background: rgba(#c12465, 0.8);
	}
}

.cube--2 {
	.face {
		background: rgba(#4b4c59, 0.8);
	}
	.face--front, .face--back {
		background: rgba(#111417, 0.8);
	}
	.face--left, .face--right {
		background: rgba(#363a42, 0.8);
	}
}

.gsap-3-logo {
	width: 20vw;
	max-width: 150px;
	position: fixed;
	bottom: 15px;
	right: 15px;
}

/*  ==========================================================
	Collection Linl
	========================================================== */

.collection {
	position: fixed;
	z-index: 1000;
	top: 24px;
	right: 24px;
	display: flex;
	flex-direction: column;
}

.collection__link {
	position: relative;
	margin-bottom: 16px;
	color: black;
	font-family: Helvetica, sans-serif;
	text-decoration: none;
	font-size: 16px;

	span {
		display: block;
		position: absolute;
		bottom: -3px;
		left: 0;
		height: 1px;
		width: 10%;
		background-color: black;
		content: "";
		transition: width 0.3s;
	}

	&:hover span{
		width: 100%;
	}
}