 Let me show you Flip, a way to convert from animating using expensive properties like top, left, width, or height which trigger layout and paint to cheaper, compositor-only operations like transform and opacity. It's super useful when you have an animation that needs to adapt to responsive breakpoints and which you can't hard code ahead of time. Firstly, we take a snapshot of our element at the start or first position using something like getBoundingClientRect. Then we make any style changes we need which will set our element to its final or last position. Now our element is in the last position but we can make it look like it's still in its first position by applying a transform that inverts the change that we just made. Finally, we can make the element have its own compositor layer with WillChangeTransform which means that the compositor and GPU can help us out with the animation and then we switch on transitions on transforms and remove that invert transform that we applied. This plays animation from first to last. So there you have it, we just swapped animating expensive properties for cheaper ones. If you want to know more, check out the description below for my post on flipping animations as well as the FlipJS Helper on GitHub.