I’m trying to create an effect where two rectangular shapes (with rounded ends), each containing text, move toward each other, merge/morph into a singular rounded rectangle as I scroll down the page, and separate again when I scroll up. The shapes need to remain sticky to the viewport position during scrolling.
What I’ve Tried:
- Applying CSS translations and transformations along with JS adjustments of the border-radius properties.
- Incorporating clip-path, but I end up with ellipses.
- Using HTML Shapes, but I need them to be containers.
The closest I’ve gotten is merely getting the shapes to move toward each other and slightly overlap. Other attempts have resulted in ellipse shapes, unnatural border-radius, or a lack of cohesion between the two elements.
HTML:
<body>
<div class="container">
<div class="shape" id="shape1">Shape 1</div>
<div class="shape" id="shape2">Shape 2</div>
</div>
</body>
CSS:
body {
width: 90%;
margin: 0 auto;
padding: 20px;
height: 2000px;
}
.container {
position: sticky;
top: 20;
display: flex;
justify-content: space-between;
}
.shape {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 30px;
border-radius: 15px;
background-color: #000;
color: #fff;
transition: transform 0.3s ease-out;
transform: translateX(0%);
}
JavaScript:
document.addEventListener('scroll', () => {
const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
const movement = (window.innerWidth / 2 - 115) * scrollPercent;
const shape1 = document.querySelector('.shape:nth-child(1)');
const shape2 = document.querySelector('.shape:nth-child(2)');
shape1.style.transform = `translateX(${movement}px)`;
shape2.style.transform = `translateX(-${movement}px)`;
});
Question:
I feel like I’m missing something with clip-path and that this is the route I need to take. How can I improve my CSS and adjust my JavaScript to achieve the morphing effect shown in the image above while maintaining rounded outer edges and building cohesion between the two containers? I appreciate any suggestions or corrections to my current approach. Thank you.