I've created a working prototype of what will eventually be a hero banner where
- the script cycles through each section
- transitions to each section use a expanding shape to reveal the next section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hero Banner Animation</title>
<style>
body {
margin: 0;
overflow: none;
}
.section {
position: absolute;
width: 100vw; /* Use viewport width */
height: 100vh; /* Use viewport height */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
clip-path: circle(0% at 50% 50%);
transition: clip-path 1.5s ease-in-out, opacity 1.5s ease-in-out;
z-index: 1;
}
@keyframes revealCircle {
0% {
clip-path: circle(0% at 50% 50%);
opacity: 1;
}
100% {
clip-path: circle(100% at 50% 50%);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="section">
<div class="headline">
<h1>Greetings</h1>
</div>
</div>
<div class="section" style="background-image: url('https://plus.unsplash.com/premium_photo-1682123600420-a54096da1156?q=80&w=2928&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
<div class="headline">
<h1>Headline 1</h1>
</div>
</div>
<div class="section" style="background-image: url('https://images.unsplash.com/photo-1506102383123-c8ef1e872756?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
<div class="headline">
<h1>Headline 2</h1>
</div>
</div>
<div class="section" style="background-image: url('https://images.unsplash.com/photo-1547626740-02cb6aed9ef8?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
<div class="headline">
<h1>Headline 3</h1>
</div>
</div>
<script>
const sections = document.querySelectorAll('.section');
const totalSections = sections.length;
let currentSectionIndex = 0;
function animateCircle() {
const currentSection = sections[currentSectionIndex];
// Reset clip-path and opacity for the current section
currentSection.style.clipPath = 'circle(0% at 50% 50%)';
currentSection.style.opacity = 0;
// Apply keyframes using animation
currentSection.style.animation = 'revealCircle 1.5s ease-in-out forwards';
// Add event listener for the animationend event
currentSection.addEventListener('animationend', function () {
// Reset clip-path and opacity for the current section before moving to the next one
currentSection.style.clipPath = 'circle(0% at 50% 50%)';
currentSection.style.opacity = 0;
// Increment to the next section index
currentSectionIndex = (currentSectionIndex + 1) % totalSections;
// Continue with the next section
animateCircle();
}, { once: true });
}
// Start the animation loop
animateCircle();
</script>
</body>
</html>
- I would like to change this script to use a SVG mask vs the clip-path circle as I have a custom shape (not a circle) that I'd like to use for the transitions
- Right now, it's stopping on the last section and I can't figure out how to make it continuous starting from the first section