Created
November 14, 2022 12:54
-
-
Save aquiseb/b716b6f962d648fc13139af719ba8e37 to your computer and use it in GitHub Desktop.
Animated Continuous Sections Using Sliding divs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
Sections animate in and out on scroll. Scroll up or down and the sections will wrap around after hitting the start or end. Uses GSAP for the animations. | |
--> | |
<header> | |
<div>Animated Sections</div> | |
<div>Made By Brian</div> | |
</header> | |
<section class="first"> | |
<div class="outer"> | |
<div class="inner"> | |
<div class="bg one"> | |
<h2 class="section-heading">Scroll down</h2> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="second"> | |
<div class="outer"> | |
<div class="inner"> | |
<div class="bg"> | |
<h2 class="section-heading">Animated with GSAP</h2> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="third"> | |
<div class="outer"> | |
<div class="inner"> | |
<div class="bg"> | |
<h2 class="section-heading">GreenSock</h2> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="fourth"> | |
<div class="outer"> | |
<div class="inner"> | |
<div class="bg"> | |
<h2 class="section-heading">Animation platform</h2> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="fifth"> | |
<div class="outer"> | |
<div class="inner"> | |
<div class="bg"> | |
<h2 class="section-heading">Keep scrolling</h2> | |
</div> | |
</div> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const sections = document.querySelectorAll("section"); | |
const images = document.querySelectorAll(".bg"); | |
const headings = gsap.utils.toArray(".section-heading"); | |
const outerWrappers = gsap.utils.toArray(".outer"); | |
const innerWrappers = gsap.utils.toArray(".inner"); | |
document.addEventListener("wheel", handleWheel); | |
document.addEventListener("touchstart", handleTouchStart); | |
document.addEventListener("touchmove", handleTouchMove); | |
document.addEventListener("touchend", handleTouchEnd); | |
let listening = false, | |
direction = "down", | |
current, | |
next = 0; | |
const touch = { | |
startX: 0, | |
startY: 0, | |
dx: 0, | |
dy: 0, | |
startTime: 0, | |
dt: 0 | |
}; | |
const tlDefaults = { | |
ease: "slow.inOut", | |
duration: 1.25 | |
}; | |
const splitHeadings = headings.map((heading) => { | |
return new SplitText(heading, { | |
type: "chars, words, lines", | |
linesClass: "clip-text" | |
}); | |
}); | |
function revealSectionHeading() { | |
return gsap.to(splitHeadings[next].chars, { | |
autoAlpha: 1, | |
yPercent: 0, | |
duration: 1, | |
ease: "power2", | |
stagger: { | |
each: 0.02, | |
from: "random" | |
} | |
}); | |
} | |
gsap.set(outerWrappers, { yPercent: 100 }); | |
gsap.set(innerWrappers, { yPercent: -100 }); | |
// Slides a section in on scroll down | |
function slideIn() { | |
// The first time this function runs, current is undefined | |
if (current !== undefined) gsap.set(sections[current], { zIndex: 0 }); | |
gsap.set(sections[next], { autoAlpha: 1, zIndex: 1 }); | |
gsap.set(images[next], { yPercent: 0 }); | |
gsap.set(splitHeadings[next].chars, { autoAlpha: 0, yPercent: 100 }); | |
const tl = gsap | |
.timeline({ | |
paused: true, | |
defaults: tlDefaults, | |
onComplete: () => { | |
listening = true; | |
current = next; | |
} | |
}) | |
.to([outerWrappers[next], innerWrappers[next]], { yPercent: 0 }, 0) | |
.from(images[next], { yPercent: 15 }, 0) | |
.add(revealSectionHeading(), 0); | |
if (current !== undefined) { | |
tl.add( | |
gsap.to(images[current], { | |
yPercent: -15, | |
...tlDefaults | |
}), | |
0 | |
).add( | |
gsap | |
.timeline() | |
.set(outerWrappers[current], { yPercent: 100 }) | |
.set(innerWrappers[current], { yPercent: -100 }) | |
.set(images[current], { yPercent: 0 }) | |
.set(sections[current], { autoAlpha: 0 }) | |
); | |
} | |
tl.play(0); | |
} | |
// Slides a section out on scroll up | |
function slideOut() { | |
gsap.set(sections[current], { zIndex: 1 }); | |
gsap.set(sections[next], { autoAlpha: 1, zIndex: 0 }); | |
gsap.set(splitHeadings[next].chars, { autoAlpha: 0, yPercent: 100 }); | |
gsap.set([outerWrappers[next], innerWrappers[next]], { yPercent: 0 }); | |
gsap.set(images[next], { yPercent: 0 }); | |
gsap | |
.timeline({ | |
defaults: tlDefaults, | |
onComplete: () => { | |
listening = true; | |
current = next; | |
} | |
}) | |
.to(outerWrappers[current], { yPercent: 100 }, 0) | |
.to(innerWrappers[current], { yPercent: -100 }, 0) | |
.to(images[current], { yPercent: 15 }, 0) | |
.from(images[next], { yPercent: -15 }, 0) | |
.add(revealSectionHeading(), ">-1") | |
.set(images[current], { yPercent: 0 }); | |
} | |
function handleDirection() { | |
listening = false; | |
if (direction === "down") { | |
next = current + 1; | |
if (next >= sections.length) next = 0; | |
slideIn(); | |
} | |
if (direction === "up") { | |
next = current - 1; | |
if (next < 0) next = sections.length - 1; | |
slideOut(); | |
} | |
} | |
function handleWheel(e) { | |
if (!listening) return; | |
direction = e.wheelDeltaY < 0 ? "down" : "up"; | |
handleDirection(); | |
} | |
function handleTouchStart(e) { | |
if (!listening) return; | |
const t = e.changedTouches[0]; | |
touch.startX = t.pageX; | |
touch.startY = t.pageY; | |
} | |
function handleTouchMove(e) { | |
if (!listening) return; | |
e.preventDefault(); | |
} | |
function handleTouchEnd(e) { | |
if (!listening) return; | |
const t = e.changedTouches[0]; | |
touch.dx = t.pageX - touch.startX; | |
touch.dy = t.pageY - touch.startY; | |
if (touch.dy > 10) direction = "up"; | |
if (touch.dy < -10) direction = "down"; | |
handleDirection(); | |
} | |
slideIn(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/CSSRulePlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/Draggable.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/EaselPlugin.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/EasePack.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/MotionPathPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/PixiPlugin.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/TextPlugin.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"); | |
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap"); | |
$bg-gradient: linear-gradient( | |
180deg, | |
rgba(0, 0, 0, 0.6) 0%, | |
rgba(0, 0, 0, 0.3) 100% | |
); | |
* { | |
box-sizing: border-box; | |
user-select: none; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
height: 100vh; | |
color: white; | |
background: black; | |
font-family: "Cormorant Garamond", serif; | |
text-transform: uppercase; | |
} | |
h2 { | |
font-size: clamp(1rem, 5vw, 5rem); | |
font-weight: 400; | |
text-align: center; | |
letter-spacing: 0.5em; | |
margin-right: -0.5em; | |
color: hsl(0, 0, 80%); | |
width: 90vw; | |
max-width: 1200px; | |
} | |
header { | |
position: fixed; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
padding: 0 5%; | |
width: 100%; | |
z-index: 3; | |
height: 7em; | |
font-family: "Bebas Neue", sans-serif; | |
font-size: clamp(0.66rem, 2vw, 1rem); | |
letter-spacing: 0.5em; | |
} | |
section { | |
height: 100%; | |
width: 100%; | |
top: 0; | |
position: fixed; | |
visibility: hidden; | |
will-change: transform; | |
.outer, | |
.inner { | |
width: 100%; | |
height: 100%; | |
overflow-y: hidden; | |
will-change: transform; | |
} | |
.bg { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
top: 0; | |
background-size: cover; | |
background-position: center; | |
h2 { | |
z-index: 2; | |
} | |
.clip-text { | |
overflow: hidden; | |
} | |
} | |
} | |
.first { | |
.bg { | |
background-image: $bg-gradient, | |
url(https://images.unsplash.com/photo-1617478755490-e21232a5eeaf?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU1NjM5NA&ixlib=rb-1.2.1&q=75&w=1920); | |
} | |
} | |
.second { | |
.bg { | |
background-image: $bg-gradient, | |
url("https://images.unsplash.com/photo-1617128734662-66da6c1d3505?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzc3NTM3MA&ixlib=rb-1.2.1&q=75&w=1920"); | |
} | |
} | |
.third { | |
.bg { | |
background-image: $bg-gradient, | |
url(https://images.unsplash.com/photo-1617438817509-70e91ad264a5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDk4Mg&ixlib=rb-1.2.1&q=75&w=1920); | |
} | |
} | |
.fourth { | |
.bg { | |
background-image: $bg-gradient, | |
url(https://images.unsplash.com/photo-1617412327653-c29093585207?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNzU2MDgzMQ&ixlib=rb-1.2.1&q=75&w=1920); | |
} | |
} | |
.fifth { | |
.bg { | |
background-image: $bg-gradient, | |
url("https://images.unsplash.com/photo-1617141636403-f511e2d5dc17?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxODAzMjc4Mw&ixlib=rb-1.2.1&q=75w=1920"); | |
background-position: 50% 45%; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment