Code:
Add this code to the first text editor widget to display text on the left
<div class="link">
<a href="add your own link here" target="_blank" rel="noopener noreferrer" data-image="1">Top side</a>
</div>
<div class="link">
<a href="#" target="_blank" rel="noopener noreferrer" data-image="2">Bottom side</a>
</div>
<div class="link">
<a href="#" data-image="3" target="_blank" rel="noopener noreferrer">Left side</a>
</div>
<div class="link">
<a href="#" data-image="4" target="_blank" rel="noopener noreferrer">Top view</a>
</div>
<div class="link">
<a href="#" data-image="5" target="_blank" rel="noopener noreferrer">Bottom view</a>
</div>
<div class="link">
<a href="#" data-image="5" target="_blank" rel="noopener noreferrer">Side view</a>
</div>Add this code to the second text editor widget to display text on the right
<img class="image" src="add your img link here" alt="" data-id="1" />
<img class="image" src="add your img link here" alt="" data-id="2" />
<img class="image" src="add your img link here" alt="" data-id="3" />
<img class="image" src="add your img link here" alt="" data-id="4" />
<img class="image" src="add your img link here" alt="" data-id="5" />
Add this code to the parent container as shown in the video:
.pill {
position: absolute;
height: 50vh;
}
.pill img {
position: absolute;
height: 50vh;
object-fit: cover;
transition: z-index 0.5s, opacity 0.5s;
opacity: 0;
}
.pill img[data-id="1"] {
z-index: 10;
opacity: 1;
}
.links {
padding: 4rem 8rem;
height: 10vh;
}
.menu a {
text-decoration: none;
font-family: "Sora", "Sans-Serif";
font-size: 4rem;
letter-spacing: -0.2rem;
color: #23332E;
transition: all 0.3s ease-in-out;
}
.menu a:hover {
color: #fff;
}
Add this code to the HTML widget as shown in the video
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
const linksContainer = document.querySelector(".links");
let currentImageId = 1;
document.querySelectorAll(".link a").forEach((link) => {
link.addEventListener("mouseenter", function () {
const targetImageId = parseInt(this.getAttribute("data-image"));
let rotationValue = targetImageId > currentImageId ? 360 : 360;
const pill = document.querySelector(".pill");
const images = document.querySelectorAll(".pill img");
gsap.to(pill, {
rotation: rotationValue,
duration: 0.4,
onComplete: function () {
gsap.set(pill, {
rotation: 0,
});
},
});
gsap.set(images, {
zIndex: 0,
opacity: 0,
delay: 0.25,
});
gsap.set(`.pill img[data-id='${targetImageId}']`, {
zIndex: 10,
opacity: 1,
delay: 0.25,
});
currentImageId = targetImageId;
});
});
</script>
TIP! If you don’t want the 360-degree spinning effect, remove the following code from:
let rotationValue = targetImageId > currentImageId ? 360 : 360;
gsap.to(pill, {
rotation: rotationValue,
duration: 0.4,
onComplete: function () {
gsap.set(pill, {
rotation: 0,
});
},
});