Can object-fit be preserved while applying a CSS transform?

Question

Can object-fit be preserved while applying a CSS transform?

Currently, I am developing a component that involves transitioning an image from a specific starting position and scale to an end position and scale in order to fill the screen. This transition is achieved through a CSS transform animation on translate and scale properties.

An issue that has arisen is that certain images being transitioned may have been altered by users of the component using the object-fit property. It seems that the CSS translate does not maintain the object-fit property during the transition.

To view a demonstration of this issue, please visit: https://codepen.io/cathyxz/pen/mXgEMB

While I could animate width and height instead, I prefer to stick with properties that browsers can animate efficiently for performance reasons. This means avoiding properties that affect layout, leaving us with only position, rotation, scale, and opacity as viable options for animation.

If you're interested in learning more about high-performance animations, check out: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

I am seeking a solution to gradually animate the transition to "uncrop" images without stretching them. Any advice or suggestions would be greatly appreciated!

javascript css css-animations css-transforms

Answer 1

Answer №1

object-fit is implemented on the element prior to any transformation taking place.

Regardless of the effects of CSS styling on the object, transform steps in and applies the necessary changes. Interestingly, the element remains untouched in the DOM structure. This is why a repaint is not triggered by transform, making it efficient in terms of performance. The only thing that changes is its rendering (the composite layer) which is stretched 4 times along the X axis due to the transform. However, this does not alter the size of the element by fourfold, hence object-fit does not function as anticipated.

Is there a way to gradually uncrop the image? Yes, but not using transform. To achieve this in a cost-effective manner (without causing a repaint within subsequent flow), you will need:

A parent placeholder (with position:relative) set to the height of the image, maintaining space in the document flow.
The element being animated should have position:absolute. By doing so, even if you animate the width, layout won't be affected because the element is outside the document flow.

.transform-placeholder {
  height: 100px;
  position: relative;
}

.transform-placeholder .object-fit {
  width: 100px;
  height: 100px; 
  animation: object-fit 2.1s infinite;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  
}

@keyframes object-fit {
  0% {
    width: 100px;
  }
  50% {
    width: 400px;
  }
  100% {
    width: 100px;
  }
}

<div class="transform-placeholder">
  <div class="object-fit" style="background-image: url('https://picsum.photos/1600/400?image=857')">
  </div>
</div>

<h2>The animation above ensures no repaint occurs on any DOM elements outside of the animated div.</h2>

Answer 2

object-fit is implemented on the element prior to any transformation taking place.

Regardless of the effects of CSS styling on the object, transform steps in and applies the necessary changes. Interestingly, the element remains untouched in the DOM structure. This is why a repaint is not triggered by transform, making it efficient in terms of performance. The only thing that changes is its rendering (the composite layer) which is stretched 4 times along the X axis due to the transform. However, this does not alter the size of the element by fourfold, hence object-fit does not function as anticipated.

Is there a way to gradually uncrop the image? Yes, but not using transform. To achieve this in a cost-effective manner (without causing a repaint within subsequent flow), you will need:

A parent placeholder (with position:relative) set to the height of the image, maintaining space in the document flow.
The element being animated should have position:absolute. By doing so, even if you animate the width, layout won't be affected because the element is outside the document flow.

.transform-placeholder {
  height: 100px;
  position: relative;
}

.transform-placeholder .object-fit {
  width: 100px;
  height: 100px; 
  animation: object-fit 2.1s infinite;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  
}

@keyframes object-fit {
  0% {
    width: 100px;
  }
  50% {
    width: 400px;
  }
  100% {
    width: 100px;
  }
}

<div class="transform-placeholder">
  <div class="object-fit" style="background-image: url('https://picsum.photos/1600/400?image=857')">
  </div>
</div>

<h2>The animation above ensures no repaint occurs on any DOM elements outside of the animated div.</h2>

Can object-fit be preserved while applying a CSS transform?

Answer №1

Similar questions

Update an existing JSON document

Troubleshooting: How to resolve the issue of receiving undefined values when passing API data to a child component with Axios in React

"I'm encountering an issue with Passport.js where req.isAuthenticated is throwing an error as not

Vuetify's v-text-field not properly aligning text to the center

What is the best way to align the logo image in the center of the header vertically?

Testing a Vue.js/Node.js application using Websockets

Accessing properties in JavaScript using square brackets

Utilize clipboard functionality in automated tests while using Selenium WebDriver in conjunction with JavaScript

The time.js library is providing inaccurate second values for the given date and time

The textboxes are not displaying the floating numbers correctly

Continuously update in JavaScript based on a condition, cease updating when the condition no longer

Issue with Laravel: Using `$request->all()` results in an empty array when called using JSON XHR

A <div> with relative positioning is inhibiting the visibility of absolutely positioned elements without any visible overlap

What is the best way to pass a variable between different routing functions?

Having trouble removing objects in angular.js?

Position the personalized radio button to be in line with the first choice text

Access an HTML file in Text Edit on a Mac directly from a web browser

How to implement a form in PHP that doesn't refresh the page upon submission

Innovative manipulation of arrays using Javascript

How can I design a search box similar to the one on the android.com website?