How to animate image from fixed size to fullscreen?-CodePudding

There is a website page which height and width are equal to 100% of the browser viewport (100vw and 100vh).

There is a high quality image (3000x2857px) inside of absolutely positioned wrapper in the center of the page. Image wrapper has max-width in pixels (e.g. 300px).

Also, the image has an overlay. I add .active class to the image wrapper by clicking on overlay. This class makes max-width of image wrapper equal to 100vw.

So, I want to animate this. I added transition to max-width, top, transform properties, but it's laggy. I know that it's due to top and max-width properties because of heavy calculations of the browser. But I don't know how to do it in other ways.

Any help would be welcome!

P.S. While I wrote this question, I found that this implementation is buggy in Safari. I think transform transition doesn't work in this browser, so it will be great if you suggest code that work in it :(

Demo: https://codepen.io/ghettojezuz/pen/ExvGwJB

const imageWrapper = document.getElementById("image-wrapper");
const overlay = document.getElementById("overlay");

function toggleImageWrapper() {
  if (imageWrapper.classList.contains('active')) {
    imageWrapper.classList.remove('active');
  } else {
    imageWrapper.classList.add('active');
  }
}

overlay.addEventListener("click", () => {
  toggleImageWrapper();
})

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}

.wrapper {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  width: 100%;
  transition: max-width .8s ease, top .8s ease, transform .8s ease;
}

.image-wrapper.active {
  max-width: 100vw;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: .7;
  transition: background-color .3s ease;
  cursor: pointer;
}

.image-overlay:hover {
  background-color: #000000;
}

<div class="wrapper">
  <div class="image-wrapper" id="image-wrapper">
    <img src="https://via.placeholder.com/3000x2857.webp" alt="">
    <div class="image-overlay" id="overlay"></div>
  </div>
</div>

CodePudding user response：

One method which seems to react to transitioning well is to alter the scale rather than try to reposition and alter width etc.

This snippet keeps the image centered and calculates the scale needed to move from the initial width to 100vw.

Note: it removes margin on elements to ensure the full width of the viewport is covered.

const imageWrapper = document.querySelector('.image-wrapper');
const overlay = document.querySelector('.image-overlay');

function toggleImageWrapper() {
  if (imageWrapper.classList.contains('active')) {
    imageWrapper.classList.remove('active');
  } else {
    imageWrapper.classList.add('active');
  }
}
overlay.addEventListener("click", () => {
  toggleImageWrapper();
})

function init() {
  const w = window.innerWidth;
  const scale = w / imageWrapper.offsetWidth;
  imageWrapper.style.setProperty('--scale', scale);
}
window.onload = init;
window.onresize = init;

* {
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}

.wrapper {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.image-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 300px;
  width: 100%;
  transition: .8s ease;
}

.image-wrapper.active {
  transform: translate(-50%, -50%) scale(var(--scale));
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: .7;
  transition: scale .3s ease;
  cursor: pointer;
}

.image-overlay:hover {
  background-color: #000000;
}

<div class="wrapper">
  <div class="image-wrapper" id="image-wrapper">
    <img src="https://via.placeholder.com/3000x2857.webp" alt="">
    <div class="image-overlay" id="overlay"></div>
  </div>
</div>

CodePudding user response：

So, I tried multiple things like different css properties, @keyframes animations etc. None of them worked. But I found out that when the image format is SVG, the freezing disappears. I know, not all images can be converted to SVG, but see what you can do about it.

CodePudding user response：

I change the top and transform with flex, now when you click only width changes, but i guess the lag will happen sometime in transform animation case

const imageWrapper = document.getElementById("image-wrapper");
const overlay = document.getElementById("overlay");

function toggleImageWrapper() {
  if (imageWrapper.classList.contains('active')) {
    imageWrapper.classList.remove('active');
  } else {
    imageWrapper.classList.add('active');
  }
}

overlay.addEventListener("click", () => {
  toggleImageWrapper();
})

body {
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
}
.img_container {
  max-width:300px;
  transition: .5s;
  position:relative;
}

.wrapper {
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}

.image-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  transition: .5s;
}

.image-wrapper.active .img_container {
  max-width: 100vw;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: .7;
  transition: background-color .3s ease;
  cursor: pointer;
}

.image-overlay:hover {
  background-color: #000000;
}

<div class="wrapper">
  <div class="image-wrapper" id="image-wrapper">
    <div class="img_container">
    <img src="https://via.placeholder.com/3000x2857.webp" alt="">
    <div class="image-overlay" id="overlay"></div>
    </div>
  </div>
</div>