How to reveal this image after some text is clicked?

Question

I am trying to use this animation but I need that if some text is clicked then the image should be revealed. Could you please help me as I am a beginner. Thanks. Codepen

let revealBox = document.querySelector('.reveal-box');

let animate = function() {
    if (revealBox.classList.contains('enter')) {
        revealBox.classList.remove('enter');
        revealBox.classList.add('leave');
    } else {
        revealBox.classList.remove('leave');
        revealBox.classList.add('enter');
    }
}

document.body.addEventListener('click', animate);

Answer 1

he is a possible upodate from the code that seems to work like you expect :

The idea is to switch the initial className used to hide/show the img at first : class="reveal-box enter animate" becomes class="reveal-box leave animate"

To avoid waiting the 0.9s duration time that takes to hide the img, you can add a négative delay equal or superior to the duration value. This negative delay should be fired only on load and then be reset to 0.

It can be added via a class by a custom delayremoved on the first click via revealBox.classList.remove('delay');.

Once class enter and leave are switched in the HTML and the delay class added to the HTML and created in the CSS, the img should not be seen untill the first click.

example:

let revealBox = document.querySelector('.reveal-box');

let animate = function() {
  if (revealBox.classList.contains('enter')) {
    revealBox.classList.remove('enter');
    revealBox.classList.add('leave');
  } else {
    revealBox.classList.remove('leave');
    revealBox.classList.remove('delay');
    revealBox.classList.add('enter');
  }
}

document.querySelector('.reveal-box p').addEventListener('click', animate);

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f7f7f7;
  cursor: pointer;
  box-sizing: border-box;
  padding: 24px;
}

.reveal-box {
  position: relative;
  height: calc(100vh - 48px);
  max-height: 480px;
  width: calc((100vh - 48px) * 0.66);
  max-width: 320px;
  overflow: hidden;
}

.reveal-box__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.reveal-box__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c1b294;
}

.reveal-box__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enter .reveal-box__inner {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-right;
}

.enter .reveal-box__inner::after {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.6s both paused slide-out-right;
}

.enter .reveal-box__image {
  animation: 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.3s both paused scale-in-down;
}

.leave .reveal-box__inner {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-out-right;
}

.leave .reveal-box__inner::after {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-left;
}

.leave .reveal-box__image {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-out-left;
}

.leave.delay .reveal-box__inner {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) -1s both paused slide-out-right;
}

.leave.delay .reveal-box__inner::after {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) -1s both paused slide-in-left;
}

.leave.delay .reveal-box__image {
  animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-out-left;
}

.animate .reveal-box__inner {
  animation-play-state: running;
}

.animate .reveal-box__inner::after {
  animation-play-state: running;
}

.animate .reveal-box__image {
  animation-play-state: running;
}

@keyframes slide-in-right {
  0% {
    transform: translate3D(-100%, 0, 0);
  }
  100% {
    transform: translate3D(0, 0, 0);
  }
}

@keyframes slide-out-right {
  0% {
    transform: translate3D(0, 0, 0);
  }
  100% {
    transform: translate3D(100%, 0, 0);
  }
}

@keyframes slide-in-left {
  0% {
    transform: translate3D(100%, 0, 0);
  }
  100% {
    transform: translate3D(0, 0, 0);
  }
}

@keyframes slide-out-left {
  0% {
    transform: translate3D(0, 0, 0);
  }
  100% {
    transform: translate3D(-100%, 0, 0);
  }
}

@keyframes scale-in-down {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

<div class="reveal-box leave delay  animate">
  <p>Some text to click</p>
  <div class="reveal-box__inner">
    <img class="reveal-box__image" src="https://images.unsplash.com/photo-1575626465329-3704c434a524?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80">
  </div>
</div>

forked codepen : https://codepen.io/gc-nomade/pen/vYyREYj to play with.

Answer 2

You can wrap any text in a <span> tag. And give it an id or class.

<span id="click-to-reveal">Some text</span>

You can select it in the script:

const text = document.getElementById("click-to-reveal");

And add the eventlistener to it instead:

text.addEventListener('click', animate);