$purple: rgb(154,138,242);
$green: rgb(168,214,112);
$blue: rgb(113,189,234);
$pink: rgb(230,119,142);
$yellow: rgb(249,220,103);
@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;
}
%center{
display: grid;
place-items: center;
}
.container{
}
.section{
min-height: 100vh;
color: rgba(255,255,255,0.7);
transform-style: preserve-3d;
font-weight: 500;
@extend %center;
font-size: 48px;
i{
font-size: 64px;
}
&:nth-child(1){
background-color: $purple;
}
&:nth-child(2){
background-color: $green;
}
&:nth-child(3){
background-color: $blue;
}
&:nth-child(4){
background-color: $yellow;
}
&:nth-child(5){
background-color: $pink;
}
}
View Compiled
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
*/
View Compiled