suretore.blogg.se - 3d rectangle with medium squish.

If we use the transform property instead we can performantly animate our square on the GPU. They impact render performance too much because updating them triggers the browser to re-evaluate related element positions and sizes. The default width and height CSS properties are (along with most other properties) not suitable for animation.

This has since been partly replaced with WebGL. Pintura Image Editor used this technique on both the x and y axis to render and animate the white crop rectangle on top of the image. The file items and the drop area of the FilePond file upload library all use this technique to smoothly animate their height. Still, with a bit of trickery, you can use this to create some awesome effects. The square cannot cut off other elements, as in, overflow: hidden won’t work.A box-shadow can be done but is a bit tricky to pull off.

We’re still scaling the center square over the X axis so background images applied to the square will be stretched.

View a demo of end result on CodePen Hold Your Horsesīefore you run of and start using this technique everywhere, please note that: We could take this further and make it more flexible by moving the animation to JavaScript, creating a web component, or by using CSS variables, but for the purpose of this article this example should suffice. Huray! We got ourselves an animatable non-squishy square! Let’s look at the CSS /* children will be positioned relativly to this element */. We’ll need one container and three child elements to represent the square left (1), center (2), and right (3) parts. Redrawing would require a repaint, the GPU cannot do that, it only deals with pixels. In the transform example the radius is not redrawn (like in the width example), it is simply scaled. You can see below how this difference impacts the border-radius property. Remember we only have the picture of the element, all other information is gone. We can only manipulate the pixels, not the contents of the element.

Because GPUs are very good at dealing with pixels, the transform operations are super fast. The GPU only has to deal with the pixels that present the element. This picture only consists of pixels, all other information about the element is gone. You can compare the GPU texure of an element with a picture you took of the element with your mobile phone. These updates can for instance be rotating, moving, and scaling of an element. The transform property instructs the GPU to make some last minute updates to the texture of an element before drawing it to the screen. To run performant animations we need to use the CSS transform or opacity properties. These operations are very taxing on the CPU, so to keep a website fast we should avoid triggering them as much as possible. This process is called a reflow and it will be followed by a repaint. Modifying the dimensions of one element can therefore have lots of unforeseen consequences.Ĭhanging the width and/or height of an element will trigger the browser to determine which other elements (children, siblings, or parents) are impacted by the change and how those elements should be updated. Most elements in some way impact the rendering of other elements, they push siblings to another position, or when their size is changed a parent element also changes size. In this 5 minute tutorial we’ll explore using the transform property to simulate animating the width of an element.ĭon’t Animate the Width and Height Propertiesīrowsers don’t like it when they have to calculate the positions and sizes of elements on the webpage. Unfortunately at the moment it’s a sure-fire way to get your browser to scream in agony. Being able to animate the CSS width and height properties would be super useful.