#wrap
#panels
%section.panel
%h1{"data-splitting" => "words"} Holy Moly Stromboli
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} Welcome to Flavortown
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} I’ve Been Stricken by Chicken
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} Peace, Love and Taco Grease
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} That’ll Do, Donkey That’ll Do
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} Tastes Really Funky, It’s Funkalicious
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} It's a Festival of Funk
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} Serve It on a Trashcan Lid
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} Shut the Front Door
.image
.inner
.image.right
.inner
.image
.inner
%section.panel
%h1{"data-splitting" => "words"} Bomb Dot Com Tasty
.image
.inner
.image.right
.inner
.image
.inner
#backgrounds
-10.times do
.bg
View Compiled
body{
display:flex;
justify-content:center;
align-items:flex-start;
height:auto;
flex-wrap:wrap;
--pink: #F1A6BD;
--cream: #FDFCEA;
--green: #1F4339;
--blue: #3975B3;
--orange: #E77553;
--delay: 0s;
background:var(--pink);
}
body.loaded{
#backgrounds{
width:1000vw;
height:100%;
position:fixed;
z-index:-1;
top:0;
left:0;
display:flex;
justify-content:flex-start;
align-items:flex-start;
transform:translateX(calc(var(--total) * -1%)) skewX(calc(var(--velocity) * 5deg));
.bg{
display:flex;
height:100vh;
width:100vw;
background:var(--pink);
overflow:visible;
position:relative;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
z-index:2;
top:0;
left:100%;
background:var(--cream);
transform:scaleX(calc(var(--posvelocity)));
transform-origin:left;
}
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
z-index:#{11 - $i};
}
}
&:nth-of-type(2n){
background:var(--cream);
&:before{
background:var(--green);
}
}
&:nth-of-type(3n){
background:var(--orange);
&:before{
background:var(--blue);
}
}
}
}
#wrap{
width:calc(100% - 32px);
max-width:1200px;
position:relative;
z-index:1;
#panels{
width:100%;
height:1000vh;
section.panel{
width:100%;
height:100vh;
position:relative;
box-sizing:border-box;
margin-bottom:0vh;
.image{
transition:transform 1s cubic-bezier(0.645, 0.045, 0.355, 1);
&:before{
transition:transform 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.inner{
transform:translateY(125%);
transition:1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
}
&:nth-of-type(2n){
h1{
span.word{
&:before{
background-image:linear-gradient(to top, var(--green) 50%, var(--orange) 50%, var(--orange) 75%, var(--cream) 75%);
}
}
}
}
&:nth-of-type(3n){
.image.right{
width:40vh;
}
h1{
span.word{
&:before{
background-image:linear-gradient(to top, var(--green) 50%, var(--cream) 50%, var(--cream) 75%, var(--pink) 75%);
}
}
}
}
&:nth-of-type(4n){
.image{
&:first-of-type{
width:40vh;
}
}
}
&.active{
.image{
@for $i from 1 through 3{
&:nth-of-type(#{$i}){
transition-delay:#{($i/2.5) + 0.75}s;
transform:scaleY(1);
&:before{
transition-delay:#{($i/2.5) + 1.5}s;
transform:scaleY(0);
}
}
}
.inner{
transform:translateY(0);
}
}
}
&.active{
~ section.panel{
.image{
transform-origin:top;
transform:scaleY(0);
transition:transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition-delay:0.5s;
&:before{
transform-origin:bottom;
transform:scaleY(1);
transition:transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.inner{
transform:translateY(125%);
}
}
h1{
span{
&:nth-of-type(3n){
&:before, &:after{
transform:translateX(-50%) translateY(-200%);
}
}
&:before, &:after{
transform:translateX(-50%) translateY(200%);
background-position:0% 100%;
}
}
}
}
h1{
font-family:"Shrikhand", serif;
font-weight:100;
span.word{
&:before{
transform:translateX(-50%) translateY(-50%);
background-position:0% 17.5%;
transition-delay:calc(((var(--word-index)) * 0.15s) + var(--delay) + 1.5s), calc(((var(--word-index)) * 0.15s) + var(--delay) + 1.75s);
}
}
}
}
h1{
position:absolute;
left:50%;
top:50%;
font-size:12vmin;
z-index:9;
transform:translate(-50%, -50%);
margin:0px;
line-height:10vmin;
width:70vmin;
span.word{
padding:1vmin 10px;
display:inline-block;
overflow:hidden;
margin:-1vmin 0;
position:relative;
color:transparent;
&:before{
content:attr(data-word);
color:var(--green);
position:absolute;
transform:translateX(-50%) translateY(175%);
transition:transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), background-position 1s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-text-stroke:2px var(--green);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image:linear-gradient(to top, var(--green) 50%, var(--cream) 50%, var(--cream) 75%, var(--pink) 75%);
background-size:450% 450%;
background-position:0% 100%;
padding:1vmin 20px;
top:50%;
left:50%;
}
}
}
&:nth-of-type(even){
transform:scaleX(-1);
h1{
transform:translate(-50%, -50%) scaleX(-1);
}
}
@for $i from 1 through 10{
&:nth-of-type(#{$i}){
.image{
transform:scaleY(0);
@for $j from 1 through 3{
&:nth-of-type(#{$j}){
.inner{
&:before{
background:url('https://assets.codepen.io/383755/fieri#{$i + $j}.jpg') center / cover;
opacity:0.5;
}
}
}
}
}
}
}
.image{
width:30vh;
height:30vh;
position:absolute;
overflow:hidden;
top:5vh;
left:10vh;
z-index:3;
box-sizing:border-box;
transform-origin:bottom;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:var(--blue);
transform-origin:top;
}
*{
box-sizing:border-box;
}
&:nth-of-type(2){
top:auto;
bottom:7.5vh;
right:10vh;
left:auto;
height:50vh;
&:before{
background:var(--green);
}
}
&:nth-of-type(3){
top:auto;
bottom:5vh;
left:15vh;
}
.inner{
position:absolute;
width:calc(100% - 5px);
height:calc(100% - 5px);
left:2.5px;
top:2.5px;
z-index:-1;
background:var(--green);
&:after{
content:'';
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;
z-index:1;
background:var(--cream);
mix-blend-mode:darken;
}
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
left:0px;
top:0px;
z-index:2;
filter:saturate(0) contrast(2);
mix-blend-mode:lighten;
}
}
}
}
}
}
}
View Compiled
Splitting();
document.addEventListener("DOMContentLoaded", function() { gsap.registerPlugin(ScrollTrigger);
$('body').addClass("loaded");
gsap.utils.toArray("section").forEach(function(elem) {
ScrollTrigger.create({
trigger: elem,
onEnter: function() { $(elem).addClass('active') },
onEnterBack: function() { $(elem).addClass('active') },
onLeave: function () { $(elem).removeClass("active")},
onLeaveBack: function () { $(elem).removeClass("active")}
});
});
function slideIn(elem){ gsap.fromTo(elem, {
y: "150%",
scale: 1,
duration: 1.5,
stagger: 1.5,
overwrite: "auto",
delay:0,
},
{
y: "0%",
scale: 1,
duration: 1.75,
stagger: 1.5,
delay:1,
overwrite: "auto",
ease: "power4.inOut"
});
}
ScrollTrigger.create({
trigger: document.body,
end: "bottom bottom",
snap: {snapTo: 0.1, duration: 0.6, delay: 0, ease: "power4.inOut"},
onUpdate: (self) => {
const totalVelocity = (self.getVelocity()/1400);
const posVelocity = Math.abs((self.getVelocity()/2400));
const totalScroll = (((self.progress - 0.1) * 100));
gsap.to("html", {"--velocity": totalVelocity, duration: 0.5});
gsap.to("html", {"--posvelocity": posVelocity, duration: 0.5});
gsap.to("html", {"--total": totalScroll, duration: 0.05, onComplete: () => {
gsap.to("html", {"--velocity": 0, "--posvelocity": 0, duration: 0.5, overwrite: "auto"})
}});
},
});
});
This Pen doesn't use any external CSS resources.