3D Card Hover Effect
- Nov 25, 2024
- 26
With the help of GSAP, we'll walk you through developing a dynamic project that provides a smooth, captivating user experience with fluid transitions and animations. This project serves as an example of how GSAP can be used to improve web interactivity.
How to Design:
Create a simple HTML foundation first, complete with placeholders for animated elements, text content, and image sections.
Use CSS to give the layout a contemporary look and make sure it is responsive for all screen sizes.
Scroll-based animations, fading pictures, and sliding text may all be animated with GSAP. Create interactive animations that are triggered by scrolling by integrating GSAP ScrollTrigger.
Improve the project by using GSAP's easing and creative timing features to give animations a seamless, organic feel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GSAP Switch content on scroll</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="page-wrapper">
<main class="page-main">
<section class="home-content_section">
<div class="home-content_visual"><img src="https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015850d47117a17_filters_quality(85)%20(1).webp" alt="" sizes="(max-width: 991px) 100vw, 50vw" srcset="https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015850d47117a17_filters_quality(85)%2520(1)-p-500.webp 500w, https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015850d47117a17_filters_quality(85)%2520(1)-p-800.webp 800w, https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015850d47117a17_filters_quality(85)%2520(1)-p-1080.webp 1080w, https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015850d47117a17_filters_quality(85)%20(1)-p-1600.webp 1600w, https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015850d47117a17_filters_quality(85)%20(1).webp 1600w" class="home-content_image" /></div>
<div class="home-content_text-wrap">
<div class="page-padding is-home-content">
<h1 class="home-content_heading text-size-h1">Made from food to protect your food.</h1>
<p class="home-content_p">Apeel is composed entirely of purified monoglycerides and diglycerides, edible compounds that can be found in a variety of foods. They are safe to eat as verified by regulatory authorities around the world, including Health Canada, the United States Food and Drug Administration (FDA), and the World Health Organization (WHO). In fact, they are so safe they can be found in products designed for the most sensitive populations, including infant formula and nutrition shakes for the elderly.</p>
</div>
</div>
</section>
<section class="home-scroll_section">
<div class="grid-col home-scroll_visual page-padding">
<div class="home-scroll_img-wrap w-dyn-list">
<div role="list" class="home-scroll_img-list w-dyn-items">
<div role="listitem" class="home-scroll_img-item w-dyn-item"><img alt="" loading="lazy" src="https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f0158530dc117a19_filters_quality(85)%20(2).webp" sizes="(max-width: 991px) 100vw, 37vw" srcset="https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f0158530dc117a19_filters_quality(85)%2520(2)-p-500.webp 500w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f0158530dc117a19_filters_quality(85)%2520(2)-p-800.webp 800w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f0158530dc117a19_filters_quality(85)%2520(2)-p-1080.webp 1080w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f0158530dc117a19_filters_quality(85)%20(2).webp 1418w" class="home-scroll_img" /></div>
<div role="listitem" class="home-scroll_img-item w-dyn-item"><img alt="" loading="lazy" src="https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f015855716117a1a_filters_quality(85).webp" sizes="(max-width: 991px) 100vw, 37vw" srcset="https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f015855716117a1a_filters_quality(85)-p-500.webp 500w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f015855716117a1a_filters_quality(85)-p-800.webp 800w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f015855716117a1a_filters_quality(85)-p-1080.webp 1080w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f015855716117a1a_filters_quality(85).webp 1436w" class="home-scroll_img" /></div>
<div role="listitem" class="home-scroll_img-item w-dyn-item"><img alt="" loading="lazy" src="https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%20(3).webp" sizes="(max-width: 991px) 100vw, 37vw" srcset="https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%2520(3)-p-500.webp 500w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%2520(3)-p-800.webp 800w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%2520(3)-p-1080.webp 1080w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%2520(3)-p-1600.webp 1600w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%2520(3)-p-2000.webp 2000w, https://assets.website-files.com/63f818b5f015850298117a13/63f818b5f01585d31a117a1b_filters_quality(85)%20(3).webp 2274w" class="home-scroll_img" /></div>
</div>
</div>
</div>
</section>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/ScrollTrigger.min.js"></script>
<script>
const images = document.querySelectorAll('.home-scroll_img');
gsap.to(images, {
opacity: 0,
scrollTrigger: {
trigger: images,
start: 'top center',
scrub: true
}
});
</script>
</body>
</html>
@font-face {
font-family: 'Founders Grotesk';
src: url('https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015851928117a14_founders-grotesk-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Founders Grotesk';
src: url('https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f01585b042117a16_founders-grotesk-semibold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Founders Grotesk';
src: url('https://assets.website-files.com/63f818b5f015858056117a09/63f818b5f015857510117a15_founders-grotesk-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: 'Founders Grotesk', sans-serif;
font-size: 1em;
line-height: 1.6;
font-weight: 500;
letter-spacing: 0em;
}
h1 {
margin-top: 0px;
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
margin-bottom: 0px;
}
p {
margin-top: 0px;
margin-bottom: 0px;
line-height: 1.4;
}
a {
font-size: 1em;
text-decoration: none;
}
.page-wrapper {
position: relative;
overflow: visible;
width: 100%;
font-size: 1em;
}
.text-size-h1 {
font-size: 5.5em;
line-height: 0.8;
font-weight: 600;
letter-spacing: -0.03em;
}
.page-padding {
width: 100%;
padding: 4em;
}
.page-padding.is-home-content {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
grid-column-gap: 2em;
grid-row-gap: 2em;
}
.home-content_section {
display: flex;
justify-content: flex-start;
align-items: stretch;
background-color: #f1753f;
color: #5b1a1d;
}
.home-content_visual {
position: relative;
width: 50%;
}
.home-content_text-wrap {
width: 50%;
}
.home-content_heading {
max-width: 6em;
}
.home-content_p {
max-width: 30em;
}
.home-content_image {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
max-height: 100%;
object-fit: cover;
}
.home-scroll_section {
display: grid;
grid-auto-columns: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
background-color: #d8e0a5;
color: #154726;
}
.home-scroll_visual {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.home-scroll_visual.page-padding {
position: sticky;
top: 0px;
}
.home-scroll_img-wrap {
width: 30em;
height: 40em;
max-height: 100%;
max-width: 100%;
}
.home-scroll_img-list {
position: relative;
width: 100%;
height: 100%;
}
.home-scroll_img-item {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 300ms ease;
}
.home-scroll_img-item.is-active {
opacity: 1;
}
.home-scroll_img {
width: 100%;
height: 100%;
border-radius: 2em;
-o-object-fit: cover;
object-fit: cover;
}
.home-scroll_content.page-padding {
padding-top: 30vh;
padding-bottom: 30vh;
}
.home-scroll_text-wrap {
max-width: 30em;
}
.home-scroll_text-item {
display: flex;
padding-top: 3em;
padding-bottom: 3em;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
grid-column-gap: 1.25em;
grid-row-gap: 1.25em;
opacity: 0.2;
transition: opacity 300ms ease;
}
.home-scroll_text-item.is-active {
opacity: 1;
}
.home-scroll_photo {
display: none;
}
@media screen and (max-width: 991px) {
.page-padding {
padding-right: 2em;
padding-left: 2em;
}
.page-padding.is-home-content {
min-height: auto;
padding-top: 6em;
padding-bottom: 2em;
}
.home-content_section {
flex-direction: column-reverse;
justify-content: flex-start;
align-items: stretch;
}
.home-content_visual {
width: 100%;
height: 80vw;
}
.home-content_text-wrap {
width: 100%;
}
.home-scroll_section {
display: block;
}
.home-scroll_visual.page-padding {
display: none;
}
.home-scroll_content.page-padding {
padding-top: 6em;
padding-bottom: 6em;
}
.home-scroll_text-wrap {
margin-right: auto;
margin-left: auto;
}
.home-scroll_text-item {
opacity: 1;
}
.home-scroll_photo {
display: block;
width: 100%;
height: 17em;
border-radius: 1em;
object-fit: cover;
}
}
@media screen and (max-width: 767px) {
.text-size-h1 {
font-size: 4em;
}
}
@media screen and (max-width: 479px) {
.page-padding {
padding-right: 1em;
padding-left: 1em;
}
}
.grid-col {
grid-column-start: span 1;
grid-column-end: span 1;
grid-row-start: span 1;
grid-row-end: span 1;
}
document.querySelectorAll(".home-scroll_section").forEach((section) => {
let childTriggers = section.querySelectorAll(".home-scroll_text-item");
let childTargets = section.querySelectorAll(".home-scroll_img-item");
// switch active class
function makeItemActive(index) {
childTriggers.forEach(trigger => trigger.classList.remove("is-active"));
childTargets.forEach(target => target.classList.remove("is-active"));
childTriggers[index].classList.add("is-active");
childTargets[index].classList.add("is-active");
}
makeItemActive(0);
// create triggers
childTriggers.forEach((trigger, index) => {
ScrollTrigger.create({
trigger: trigger,
start: "top center",
end: "bottom center",
onToggle: ({isActive}) => {
if (isActive) {
makeItemActive(index);
}
}
});
});
});
Leave Comments