
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
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.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
<section class="cloneable">
<div data-hover="" data-pixelated-image-reveal="" class="pixelated-image-card">
<div class="before__100"></div>
<div class="pixelated-image-card__default">
<img src="https://cdn.prod.website-files.com/6712ad33825977f9d2f1ba2c/6714d43a777a77da89a9b5ec_osmo-pixelated-image-1.jpg" width="400" alt="" class="pixelated-image-card__img">
</div>
<div data-pixelated-image-reveal-active="" class="pixelated-image-card__active">
<img src="https://cdn.prod.website-files.com/6712ad33825977f9d2f1ba2c/6714d43a4d1abab1b3c81caf_osmo-pixelated-image-2.jpg" width="400" alt="" class="pixelated-image-card__img">
</div>
<div data-pixelated-image-reveal-grid="" class="pixelated-image-card__pixels">
<div class="pixelated-image-card__pixel"></div>
</div>
</div>
</section>
HTML structure is not required for this resource.
Step 2: Add CSS
CSS
.cloneable {
padding: var(--container-padding);
justify-content: center;
align-items: center;
min-height: 100svh;
display: flex;
position: relative;
}
.pixelated-image-card {
background-color: var(--color-neutral-800);
color: var(--color-primary);
border-radius: .5em;
width: 30vw;
max-width: 100%;
position: relative;
overflow: hidden;
}
.before__100 {
padding-top: 100%;
}
.pixelated-image-card__default,
.pixelated-image-card__img,
.pixelated-image-card__active,
.pixelated-image-card__pixels{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.pixelated-image-card__active {
display: none;
}
.pixelated-image-card__pixel {
background-color: currentColor;
width: 100%;
height: 100%;
display: none;
position: absolute;
}
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
document.addEventListener('DOMContentLoaded', function () {
const animationStepDuration = 0.3;
const gridSize = 7;
const pixelSize = 100 / gridSize;
const cards = document.querySelectorAll('[data-pixelated-image-reveal]');
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || window.matchMedia("(pointer: coarse)").matches;
cards.forEach((card) => {
const pixelGrid = card.querySelector('[data-pixelated-image-reveal-grid]');
const activeCard = card.querySelector('[data-pixelated-image-reveal-active]');
const existingPixels = pixelGrid.querySelectorAll('.pixelated-image-card__pixel');
existingPixels.forEach(pixel => pixel.remove());
for (let row = 0; row < gridSize; row++) {
for (let col = 0; col < gridSize; col++) {
const pixel = document.createElement('div');
pixel.classList.add('pixelated-image-card__pixel');
pixel.style.width = `${pixelSize}%`;
pixel.style.height = `${pixelSize}%`;
pixel.style.left = `${col * pixelSize}%`;
pixel.style.top = `${row * pixelSize}%`;
pixelGrid.appendChild(pixel);
}
}
const pixels = pixelGrid.querySelectorAll('.pixelated-image-card__pixel');
const totalPixels = pixels.length;
const staggerDuration = animationStepDuration / totalPixels;
let isActive = false;
let delayedCall;
const animatePixels = (activate) => {
isActive = activate;
gsap.killTweensOf(pixels);
if (delayedCall) delayedCall.kill();
gsap.set(pixels, { display: 'none' });
gsap.to(pixels, {
display: 'block',
duration: 0,
stagger: { each: staggerDuration, from: 'random' }
});
delayedCall = gsap.delayedCall(animationStepDuration, () => {
activeCard.style.display = activate ? 'block' : 'none';
activeCard.style.pointerEvents = activate ? 'none' : '';
});
gsap.to(pixels, {
display: 'none',
duration: 0,
delay: animationStepDuration,
stagger: { each: staggerDuration, from: 'random' }
});
};
if (isTouchDevice) {
card.addEventListener('click', () => animatePixels(!isActive));
} else {
card.addEventListener('mouseenter', () => {
if (!isActive) animatePixels(true);
});
card.addEventListener('mouseleave', () => {
if (isActive) animatePixels(false);
});
}
});
});
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
Customization Options
Duration
In the Javascript adjust animationStepDuration = 0.3;
to make the pixel reveal faster or slower.
Pixel size
Change the gridSize = 7;
value to increase or decrease the number of pixels in the grid.
Resource Details
Last updated
January 22, 2025
Type
The Vault
Category
Hover Interactions
Need help?
Join Slack