gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .wrapper",
scrub: false,
// pin: true,
start: "top 30%",
end: "bottom -30%",
}
});
gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .title",
anticipatePin: 1,
scrub: true,
start: "center 55%",
end: "bottom 50%",
}
}).to(".totem-animal .title .step1", {opacity: 1, top: 0, duration: 3});
gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .title",
anticipatePin: 1,
scrub: true,
start: "center 50%",
end: "bottom 45%",
}
}).to(".totem-animal .title .step2", {opacity: 1, top: 0, duration: 3});
gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .title",
anticipatePin: 1,
scrub: true,
start: "center 45%",
end: "bottom 35%",
}
}).to(".totem-animal .title .step3", {opacity: 1, top: 0, duration: 3});
gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .title",
anticipatePin: 1,
scrub: true,
start: "center 35%",
end: "bottom 30%",
}
}).to(".totem-animal .title .step4", {opacity: 1, top: 0, duration: 3});
gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .title",
anticipatePin: 1,
scrub: true,
start: "center 30%",
end: "bottom 25%",
}
}).to(".totem-animal .title .step5", {opacity: 1, top: 0, duration: 3});
gsapInstance.timeline({
scrollTrigger: {
trigger: ".totem-animal .title",
anticipatePin: 1,
scrub: true,
start: "center -20%",
end: "bottom -100%",
toggleClass: "active"
}
}).to(".totem-animal .title", {opacity: 1, duration: 1});
.title {
position: sticky;
top: 30vh;
z-index: 10;
margin: 0 auto 0;
background: #000;
color: #EEEEEE;
font-size: 114px;
line-height: 138px;
text-align: left;
transition: .3s;
&.active {
opacity: 0 !important;
}
span {
opacity: 0;
top: 48px;
position: relative;
display: inline-block;
}
}
.container .wrapper {
z-index: 2;
height: 115vh;
background: rebeccapurple;
}
}
<section class="totem-animal bg-dark">
<div class="container">
<div class="wrapper">
<p class="title">
<span class="step1">Test</span>
<span class="step2">test</span>
<br>
<span class="step3">one </span>
<span class="step4">two </span>
IMG_7108 (online-video-cutter.com) (1) .mp4
