Nirazul Nirazul - 1 year ago 70
CSS Question

Nested css scale transform transitions don't cancel out each other

I have an image that changes its height based on an overview/detail state. It needs to be a background-image with

background-size: cover
to ensure that the container is covered at all times.

As the transition needs to be performant, I see no other way than using
transform: scaleY(0.5)
on a wrapper-element and a corresponding transform
transform: scaleY(2)
on the inner element, that is cancelling out the scale effect.

At the beginning and the end, the math is correct. The transition looks wrong, though.
I've prepared a small fiddle to illustrate what is going wrong:

Codepen - Fiddle

As you can see, the transitions, even though linear, don't exactly cancel out each other. I suppose there is an underlying mathematical problem, but I can't seem to find a solution to it.

Answer Source

edit: went ahead and made an example codepen for the bezier curve. <-- (old)

Now with curve for transition back to normal element state: <-- (new)

The issue you're facing is with the relativity of these operations. You'll have to give different values for the transitions in play. You have the math logic right regarding the transforms, however, the transitions you have that are modifying these characteristics aren't adjusted to maintain the same animation with their own respectively different values- the transition values are the same.

What this means is that even though you have a perfect 2:1 scale between the two objects being transitioned, their rate of change is inherently different at different steps in the process- regardless of their destination/end result. You need to adjust the transition settings if you want them equalized in appearance.

Still Confused? In other words....

Let's assume that you have 2 div boxes in separate containers that don't affect each other. Here's some CSS to convey their relevant properties:



We could throw a transition on these that's exactly the same: linear, 10s, and doubling their respective sizes with scale(). (div.a would be 200px in height/width and div.b would be 400px in height/width)

Now, while it may seem unrelated to your circumstances and obvious that these 2 would not 'grow' at the same rate - (different starts, different destinations [that don't equally negate the initial start differences], with same duration) - this is the same issue that you're coming across.

To rectify the problem and get your animations to behave in the manner you're expecting, you'll have to modify the timing functions of your transition.

To demonstrate that the phenomenon that I'm describing is indeed actually happening, I've gone ahead and changed your transition type for one of the transforming elements to one that eases and forked it on the codepen link below. Play with it, and you'll get what I'm talking about. If you need more info, comment on my answer!

Helpful Link:

Further Reading: Quadratic Bezier Curve: Calculate Point

(Also, I'm sure that the math stack exchange folks would love to chew this stuff up for you. I'm almost positive they can give you a much clearer breakdown of how the curves work.) (Ugh, this is messy as heck now. I'll clean this up and reformat later)