Intersection Observer + CSS Transform

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Intersection observer</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <button id="button" type="button" name="show-image">Transition image inside viewport</button>
    <div id="message"></div>
    <img id="image" src="https://images.unsplash.com/photo-1543572085-4e676d1f3d6f?w=400&q=60" alt="stock image">
    <script src="script.js" charset="utf-8"></script>
  </body>

</html>

CSS

#message {
  height: 2em;
  margin-bottom: 100vh;
  background-color: #fdd;
}

#image {
  transition: transform 3s;
}

#image.inside {
  transform: translate(0em, -75vh);
}

JavaScript

(function() {
  let button = document.getElementById('button');
  let message = document.getElementById('message');
  let image = document.getElementById('image');

  let observer = new IntersectionObserver(function(ev) {
    if (ev[0].isIntersecting) {
      message.appendChild(
        document.createTextNode('Callback triggered! Image is inside!'));
    }
  });
  observer.observe(image);

  button.addEventListener('click', function() {
    image.classList.add('inside');
  });
})();