Image reveal effect with GSAP

Програмирането може да бъде забавно! Това е нещо, което често повтарям по време на обученията. В snippet-a днес ви показвам нещо по-креативно и нестандартно като интеракция, а именно – image reveal.

Бележка: за това демо е необходимо да използваме GSAP (виж как да го инсталираш от тук).

Започваме с HTML-a:

<div class="image-wrap">
    <div class="mask"></div>
    <img src="https://devblondie.com/project-2024/img/hero-image.png" alt="" class="image">
</div>

Markup-а ни се състои от един контейнер, който държи в себе си две деца – самото изображение и един празен div с клас mask, който ще използваме за подложка.

Добавяме и CSS стиловете:

.image-wrap {
  position: relative;
  z-index: 2;
  width: 300px;
  overflow: hidden;
}

.mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #D53F34;
  z-index: 1;
}

.image {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

Какво се случва тук? Имаме релативно позициониран родител – image-wrap, в който пък абсолютно позиционираме маската, която е и с ширина 100% и височина 0 (височината ще манипулираме чрез GSAP, за да получим желаният ефект). Добавили сме и релаивно позициониране на самото изображение, за да му придадем z-index: 2, с който да го показваме над маската.

Остава ни да добавим и JavaScript-а:

document.addEventListener('DOMContentLoaded', function () {
    // Select all elements with the class '.image-wrap'
    const imageMasks = document.querySelectorAll('.image-wrap');
    
    // Loop through each '.image-wrap' element
    gsap.utils.toArray(imageMasks).forEach((wrap) => {
        const mask = wrap.querySelector('.mask');
        const image = wrap.querySelector('.image');
        
        if (!mask || !image) {
            return; 
        }

        // Create GSAP's timeline 
        const tl = gsap.timeline();

        // Add animations to the timeline
        tl.to(mask, { opacity: 1, height: "100%", duration: 0.3 })
          .from(image, { opacity: 0, y: "100%", duration: 0.5, ease: "power2.out", delay: 0.3 });
    });
});

В случая този скрипт ще работи с повече от един контейнер image-wrap (или с повече от едно изображение). Това, което правим, е да запазим всички контейнери в една променлива imageMasks и да вземем child елементите на всеки от тях, след което с един gsap.timeline(); да създадем последователност от две анимации – промяна на височината на mask елемента до 100% и появяване на самото изображение от нулева до пълна плътност (opacity), като появата е от долу нагоре.

Може да видиш крайният резултат в CodePen: