Hello World.
Box Scroll Demo
Fin.
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
.section {
display: grid;
place-items: center;
}
.section {
min-height: 100vh;
color: rgba(255, 255, 255, 0.7);
transform-style: preserve-3d;
font-weight: 500;
font-size: 48px;
}
.section i {
font-size: 64px;
}
.section:nth-child(1) {
background-color: #9a8af2;
}
.section:nth-child(2) {
background-color: #a8d670;
}
.section:nth-child(3) {
background-color: #71bdea;
}
.section:nth-child(4) {
background-color: #f9dc67;
}
.section:nth-child(5) {
background-color: #e6778e;
}
const sections = gsap.utils.toArray($(".section"));
sections.forEach((section, index) => {
ScrollTrigger.create({
trigger: section,
start: "top top",
toggleClass: "active",
onUpdate: (self) => {
$(sections).css({
transform: "none"
});
$(section).css({
"transform-origin": "bottom center",
transform: `perspective(2000px) rotateX(${self.progress * 90}deg)`
});
const next = $(section).next();
if (self.direction && next.length) {
$(next).css({
"transform-origin": "top center",
transform: `perspective(2000px) rotateX(${
self.progress * 90 - 90
}deg)`
});
}
},
snap: {
snapTo: 1,
duration: 1
}
});
});
/* Color Inspiration:
https://dribbble.com/shots/10970419-Workly-Color-System
https://dribbble.com/sandhya_subram
*/