Background
Setup
Custom
GSAP
Image
Draggable
Comparison
Before
After
Search
K
Documentation
Adlis Smart
Code
Setup: External Scripts
External Scripts in Adlis Smart
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 Adlis Smart 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 Adlis Smart
Copy structure to Adlis Smart
In the video below we described how you can copy + paste the structure of this resource to your Adlis Smart project.
Copy to Adlis Smart
Adlis Smart 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 Adlis Smart
In this video, Ilja gives you some guidance about using JavaScript in Adlis Smart:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
gsap.registerPlugin(Draggable);
function initBeforeAfterSplitSlider() {
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);
}
// Initialize Before After Split Slider
document.addEventListener("DOMContentLoaded", () => {
initBeforeAfterSplitSlider();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Adlis Smart
Curious about where to put custom CSS in Adlis Smart? 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
April 25, 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.