Copied SVG to clipboard
Something went wrong
Copied code to clipboard
Something went wrong

Default

User image

Default

Name

  • Osmo Discount
    -25%
The Vault/

Pixelated Image Reveal

Pixelated Image Reveal

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.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

Copy
<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

Copy
.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

Copy
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

Copy

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

Image
Reveal
Pixels
Hover
GSAP
Stagger
Interaction

Original source

Dennis Snellenberg

Creator 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.