animations / about section
This commit is contained in:
HAM!DREZA
+140
-236
@@ -1,256 +1,160 @@
|
||||
<template>
|
||||
<div ref="main" class="scroller relative h-[1000px]">
|
||||
<section class="orange">
|
||||
<div class="text">This is some text inside of a div block.</div>
|
||||
</section>
|
||||
|
||||
<section class="black">
|
||||
<div class="text-wrap">
|
||||
<div class="panel-text blue-text">Blue</div>
|
||||
<div class="panel-text red-text">Red</div>
|
||||
<div class="panel-text orange-text">Orange</div>
|
||||
<div class="panel-text purple-text">Purple</div>
|
||||
<div class="description blue">
|
||||
<div>
|
||||
<h1>Side by Side Layered pinning</h1>
|
||||
<p>Use pinning to layer panels on top of each other as you scroll.</p>
|
||||
<div class="scroll-down">
|
||||
Scroll down
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-wrap">
|
||||
<div class="panel blue"></div>
|
||||
<div class="panel red"></div>
|
||||
<div class="panel orange"></div>
|
||||
<div class="panel purple"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="blue"></section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sections">
|
||||
<div class="container-page">
|
||||
<div class="contento">
|
||||
<h2>This is random content</h2>
|
||||
</div>
|
||||
<div class="contento">
|
||||
<h2>This is another content</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panels">
|
||||
<section class="panel red">ONE</section>
|
||||
<section class="panel orange">TWO</section>
|
||||
<section class="panel purple">THREE</section>
|
||||
<section class="panel green">FOUR</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="spacer">
|
||||
<h1>The End!</h1>
|
||||
<h1>Happy Tweening!</h1>
|
||||
</section>
|
||||
|
||||
<header>
|
||||
<a href="https://greensock.com/scrolltrigger">
|
||||
<img
|
||||
class="greensock-icon"
|
||||
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg"
|
||||
width="200"
|
||||
height="64"
|
||||
/>
|
||||
</a>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
// import { onMounted, onUnmounted, ref } from "vue";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
import {Scrollbar} from "gsap/Scrollbar"
|
||||
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
||||
gsap.registerPlugin(ScrollTrigger, Scrollbar);
|
||||
// import {Scrollbar} from "gsap/Scrollbar"
|
||||
// import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const main = ref();
|
||||
let ctx;
|
||||
// const main = ref();
|
||||
// let ctx;
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
let bodyScrollBar = Scrollbar.init(document.body, {
|
||||
damping: 0.1,
|
||||
delegateTo: document,
|
||||
});
|
||||
|
||||
|
||||
ScrollTrigger.scrollerProxy(".scroller", {
|
||||
scrollTop(value) {
|
||||
if (arguments.length) {
|
||||
bodyScrollBar.scrollTop = value;
|
||||
}
|
||||
return bodyScrollBar.scrollTop;
|
||||
},
|
||||
console.clear();
|
||||
const panels = gsap.utils.toArray(".panel");
|
||||
console.log("panels :", panels);
|
||||
gsap.set(panels, {
|
||||
yPercent: (i) => (i ? 100 : 0),
|
||||
});
|
||||
bodyScrollBar.addListener(ScrollTrigger.update);
|
||||
|
||||
gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i });
|
||||
|
||||
var images = gsap.utils.toArray(".panel:not(.purple)");
|
||||
|
||||
images.forEach((image, i) => {
|
||||
var tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: "section.black",
|
||||
scroller: ".scroller",
|
||||
start: () => "top -" + window.innerHeight * (i + 0.5),
|
||||
end: () => "+=" + window.innerHeight,
|
||||
scrub: true,
|
||||
toggleActions: "play none reverse none",
|
||||
invalidateOnRefresh: true,
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(image, { height: 0 });
|
||||
});
|
||||
|
||||
gsap.set(".panel-text", {
|
||||
zIndex: (i, target, targets) => targets.length - i,
|
||||
});
|
||||
|
||||
var texts = gsap.utils.toArray(".panel-text");
|
||||
|
||||
texts.forEach((text, i) => {
|
||||
var tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: "section.black",
|
||||
scroller: ".scroller",
|
||||
start: () => "top -" + window.innerHeight * i,
|
||||
end: () => "+=" + window.innerHeight,
|
||||
scrub: true,
|
||||
toggleActions: "play none reverse none",
|
||||
invalidateOnRefresh: true,
|
||||
},
|
||||
});
|
||||
|
||||
tl.to(text, { duration: 0.33, opacity: 1, y: "50%" }).to(
|
||||
text,
|
||||
{ duration: 0.33, opacity: 0, y: "0%" },
|
||||
0.66
|
||||
);
|
||||
});
|
||||
|
||||
ScrollTrigger.create({
|
||||
trigger: "section.black",
|
||||
scroller: ".scroller",
|
||||
scrub: true,
|
||||
markers: true,
|
||||
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".sections",
|
||||
start: "top top",
|
||||
end: () => "+=" + 100 * panels.length + "%",
|
||||
pin: true,
|
||||
start: () => "top top",
|
||||
end: () => "+=" + (images.length + 1) * window.innerHeight,
|
||||
invalidateOnRefresh: true,
|
||||
});
|
||||
scrub: 1,
|
||||
markers: true
|
||||
}
|
||||
});
|
||||
|
||||
panels.forEach((panel, index) => {
|
||||
if (index) {
|
||||
tl.to(
|
||||
panel,
|
||||
{
|
||||
yPercent: 0,
|
||||
ease: "none"
|
||||
},
|
||||
"+=0.25"
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
}
|
||||
.scroller {
|
||||
height: 100vh;
|
||||
}
|
||||
.sections {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
}
|
||||
.panels {
|
||||
width: 50%;
|
||||
/* height: 100vh; */
|
||||
background: lime;
|
||||
|
||||
position: relative;
|
||||
|
||||
.orange {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #753500;
|
||||
}
|
||||
}
|
||||
.container-page {
|
||||
width: 50%;
|
||||
background-color: purple;
|
||||
}
|
||||
.container-page h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.panel {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
margin-bottom: 100px !important;
|
||||
margin-left: auto;
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: blue;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.blue h1 {
|
||||
margin: 0 0 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.green {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.black {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
-webkit-justify-content: space-around;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #070707;
|
||||
}
|
||||
|
||||
.blue {
|
||||
height: 100vh;
|
||||
background-color: #00026d;
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 450px;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.panel-text {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 40px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
background-color: #070707;
|
||||
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.panel-text.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.panel-text.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.panel-text.purple-text {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
.panel-text.orange-text {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.p-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 450px;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../images/5ed12171d9d512cb2feead83_5.jpg");
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.panel._2 {
|
||||
z-index: 1;
|
||||
background-image: url("../images/5f5a5b3515c4dd0c2c455925_110642301_938622823267359_7859124022958180678_n201.jpg");
|
||||
}
|
||||
|
||||
.panel.blue {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.panel.red {
|
||||
z-index: auto;
|
||||
background-color: red;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.panel.orange {
|
||||
z-index: auto;
|
||||
background-color: #cf5d00;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.panel.purple {
|
||||
z-index: auto;
|
||||
background-color: #808;
|
||||
background-image: none;
|
||||
}
|
||||
section.spacer {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user