The Transform Sled 🛷

The best way to animate moving something with CSS is using the transform property along with any translate CSS function since this provides the best performance, but a tricky challenge presents itself if you want to move the element by a percentage of its parent’s box size.

You might think to try something like this:

In most cases, percent values do refer to the parent’s bounding box. Unfortunately that’s not the case with translate functions where percent values used within any translate function refer to the translated element’s own bounding box.

So how can we achieve the desired effect of moving the .child by 100% of the .parent while still using the performant translate function approach?

Enter the “transform sled”. The idea is: the .sled can have the same dimensions as the .parent and the .child can be positioned wherever you want on the .sled. Then you can move the .sled and the .child will move with it!

To achieve this, we’ll need to set position:relative; on the .parent and position: absolute; inset: 0; on the .sled to give it the same dimensions as the parent. Lastly, we will move the animation from the .child to the .sled!

And with that, we’ve achieved our goal of performantly moving the .child 100% of the way down the .parent! 🎉