Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Layered Pinning From Bottom - ScrollTrigger
<header >
<section class="header-container blue">
<h1>Layered pinning from bottom</h1>
<p>A simple example where overlapping panels reveal from the bottom.</p>
<div class="scroll-down">Scroll down
<div class="arrow"></div>
</div>
</section>
</header>
<div class="content">
<section class="intro"></section>
<section class="description"></section>
<section class="conclusion salmon"></section>
</div>
<footer class="footer">
<section class="footer-container">
<div class="footer-row">
<div class="logo"></div>
</div>
<div class="footer-row center">
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="circles">
<div class="circle"></div>
</div>
</div>
<div class="footer-row">
<div class="foot"></div>
</div>
</section>
</footer>
// FOOTER
gsap.set('section.footer-container', { yPercent: -50 })
// const uncover = gsap.timeline({ paused:true })
gsap.to('section.footer-container', {
scrollTrigger: {
trigger: '.content',
start: 'bottom bottom',
end: '+=66%',
markers: true,
scrub: true,
},
yPercent: 0,
ease: 'none'
});
// HEADER
gsap.to('section.header-container', {
scrollTrigger: {
trigger: '.content',
start: 'top bottom',
end: '=66%',
markers: true,
scrub: true,
},
yPercent: -50,
ease: 'none'
});
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://codepen.io/GreenSock/pen/7ba936b34824fefdccfe2c6d9f0b740b"></script>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
html, body {
margin: 0;
-webkit-overflow-scrolling: touch;
font-family: "Signika Negative", sans-serif, Arial;
}
.gray { background-color: #777; }
.salmon {background-color: salmon; }
.blue {
background-color: #2c7ad2;
background-image: url("https://portfoliowaterfall.pbds.dev/assets/img/wawa.jpg");
background-size: cover;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 1.5em;
text-align: center;
color: white;
box-sizing: border-box;
padding: 10px;
}
h1, h2, p, li {
max-width: 800px;
}
/* HEADER */
header {
position: sticky;
top: 0px;
left: 0px;
height: 100vh;
width: 100vw;
background-color: #222;
z-index: -1;
}
section.header-container {
height: 100vh;
color: #f0f0f0;
background-color: #222;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* SCROLL DOWN */
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
color: black;
font-weight: 400;
text-transform: uppercase;
font-size: 16px;
overflow: visible;
}
.scroll-down .arrow {
position: relative;
top: -4px;
margin: 0 auto;
width: 20px;
height: 20px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);
background-size: contain;
}
.content section {
width: 100vw;
min-height: 100vh;
background-color: lightgrey;
}
section.description {
background-color: white;
}
section.conclusion{
height: 200vh;
}
footer {
height: 75vh;
width: 100vw;
background-color: #222;
overflow: hidden;
}
section.footer-container {
height: 75vh;
color: #f0f0f0;
background-color: #222;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Filler Stuff */
.footer-row {
height: 33.3%;
width: 100vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.footer-row.center {
background-color: #262626;
justify-content: space-around;
}
.logo {
width: 400px;
height: 80px;
background-color: #f0f0f0;
border-radius: 3px;
}
.items {
width: 50vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.item {
width: 80px;
height: 80px;
background-color: #f0f0f0;
border-radius: 3px;
}
.circles {
width: 50vw;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.circle {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border-radius: 50%;
}
.foot {
height: 20px;
width: 80vw;
background-color: #f0f0f0;
border-radius: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment