Background
Setup
Custom
GSAP
Image
Draggable
Comparison
Before
After
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/Draggable.min.js"></script>Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div data-splitter-initial="25" data-splitter="wrap" class="splitter-wrapper">
<div class="splitter-content"><img src="images/osmo-splitter-before.avif" loading="lazy" alt="" class="splitter-content__img"></div>
<div data-splitter="after" class="splitter-content is--after"><img src="images/osmo-splitter-after.avif" loading="lazy" alt="" class="splitter-content__img"></div>
<div data-splitter="handle" class="splitter-handle">
<div class="splitter-handle__center"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" class="splitter-handle__icon">
<path d="M20.7931 11.5L15.2931 5.99995L16.0002 5.29285L22.3537 11.6464V12.3535L16.0002 18.7071L15.2931 18L20.793 12.5L3.20719 12.5L8.70714 18L8.00004 18.7071L1.64648 12.3535L1.64648 11.6464L8.00004 5.29285L8.70714 5.99995L3.2071 11.5L20.7931 11.5Z" fill="currentColor"></path>
</svg></div>
</div>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.splitter-wrapper {
aspect-ratio: 3 / 2;
border-radius: 2rem;
width: min(95vw, 60em);
position: relative;
overflow: hidden;
}
.splitter-content {
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
inset: 0%;
}
.splitter-content.is--after {
-webkit-clip-path: inset(0 0 0 25%);
clip-path: inset(0 0 0 25%);
}
.splitter-content__img {
object-fit: cover;
width: 100%;
height: 100%;
}
.splitter-handle {
z-index: 2;
cursor: ew-resize;
background-color: #fff;
justify-content: center;
align-items: center;
width: .25em;
height: 100%;
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 25%;
}
.splitter-handle__center {
grid-column-gap: .125em;
grid-row-gap: .125em;
background-color: #fff;
border-radius: 100em;
flex: none;
justify-content: center;
align-items: center;
width: 2.5em;
height: 2.5em;
display: flex;
position: relative;
}
.splitter-handle__icon {
justify-content: center;
align-items: center;
width: 1.25em;
display: flex;
}
img::selection{ background: none; }
.splitter-handle__center::after{
content:'';
position:absolute;
z-index: 1;
width: 100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius:100em;
opacity: 1;
border: 1px solid white;
transition: all 0.4s cubic-bezier(0.35, 1, 0.6, 1);
}
.splitter-handle:hover .splitter-handle__center::after{
width: 130%;
height:130%;
opacity: 0.5;
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
gsap.registerPlugin(Draggable);
function initSplitters() {
const splitters = document.querySelectorAll('[data-splitter="wrap"]');
const setupSplitter = (splitter) => {
const handle = splitter.querySelector('[data-splitter="handle"]');
const after = splitter.querySelector('[data-splitter="after"]');
let bounds = splitter.getBoundingClientRect();
let currentPercent = parseFloat(splitter.getAttribute('data-splitter-initial')) || 50;
const setPositions = (percent) => {
bounds = splitter.getBoundingClientRect();
const positionX = (percent / 100) * bounds.width;
gsap.set(handle, { x: positionX, left: "unset" });
gsap.set(after, { clipPath: `inset(0 0 0 ${percent}%)` });
};
setPositions(currentPercent);
Draggable.create(handle, {
type: 'x',
bounds: splitter,
cursor: 'ew-resize',
activeCursor: 'grabbing',
onDrag() {
currentPercent = (this.x / bounds.width) * 100;
gsap.set(after, { clipPath: `inset(0 0 0 ${currentPercent}%)` });
}
});
window.addEventListener('resize', () => setPositions(currentPercent));
};
splitters.forEach(setupSplitter);
}
document.addEventListener("DOMContentLoaded", () => {
initSplitters();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
img::selection{ background: none; }
.splitter-handle__center::after{
content:'';
position:absolute;
z-index: 1;
width: 100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius:100em;
opacity: 1;
border: 1px solid white;
transition: all 0.4s cubic-bezier(0.35, 1, 0.6, 1);
}
.splitter-handle:hover .splitter-handle__center::after{
width: 130%;
height:130%;
opacity: 0.5;
}Implementation
For this to work, you'll need a wrapper with data-splitter="wrap". Inside you'll need 2 content divs. One for the 'before' and one for the 'after'. Make sure to add data-splitter="after" to the after element. Also add some sort of handle, bar, or visual cue for your users to drag, and give this element an attribute of data-splitter="handle". By adding data-splitter-initial with a number value between 0-100 to the wrap element, you can control the initial position of the slider on page load. So no need to mess around with the CSS properties for each instance of the splitter!
How it works
On drag, we animate the clip-path value of our 'after' element. So we're essentially resizing a mask on a div. This gives us complete freedom as to what goes inside our data-splitter="after" div. In our example we used an image, but this could be a video, or any other element.
Search
K
Resource Details
Last updated
March 18, 2025
Type
The Vault
Category
Gallery & Images
Need help?
Join Slack
Original source
Ilja van EckCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.