CSS Modal Animation Comparison: translateY vs. translate/scale

HTML & CSS
1

Is AI right?

In code 1, the transformation for the modal uses transform: translateY(-25%); initially and transitions to transform: translateY(0); when active. This creates a smooth vertical slide effect that’s intuitive and visually appealing. Code 2, on the other hand, combines translate(0, -25%) with transform: scale(1);, which could lead to inconsistent animation behaviors and might not produce the desired effect across different browsers or devices.

Also from AI:

Do you agree?

The handling of pointer-events in code 1 is also more precise. By toggling between pointer-events: none; and pointer-events: auto;, it effectively controls the modal’s interactivity, ensuring users can only interact with it when it’s active. Code 2 uses pointer-events: initial;, which might not consistently prevent interactions when the modal is inactive.

Code 1)

.modal {
  transition: transform 0.3s ease-out;
  transform: translateY(-25%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

.modal.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
}

Code 2)

.modal {
  transition: transform 0.3s ease-out;
  translate(0, -25%)
  opacity: 0;
  pointer-events: none;
  z-index: -99;
  border-radius: 50%;
}

.modal.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 1000;
  pointer-events: auto;
  border-radius: 0;
  overflow: auto;
}
2

That’s not correct. You missed out the property and the semi colon at the end!!

It should be:

transform:translate(0, -25%);

That is nonsense unless you have previously given it a scale value that is different from 1?

What that rules does is cancel out all the other transforms but sets scale to 1 which it was already. You really should have just used the same format and used transform: translateY(0%) That makes more logical sense.

The property transform is a shorthand so just by luck you set the translateY back to 0% when you used scale(1). The default value for translate would be zero so by setting any other shorthand value instead all the others return to their default.

While it is nonsense semantically it will work without problem but will confuse you when you look at it next time.

That’a the same as saying translateY(25%). Its just that the first one allows you to set the translateX value as well but as it is zero then it does nothing.

1 Like
3

Yes you should use initial because auto won’t over-ride a childs cclickability when a parent is pointer-events:none but initial will over-ride it.

1 Like
4

I should change this: transform: scale(1);

to this?
transform: translateY(0%);

.modal {
  transform: translate(0, -25%);
}

.modal.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
}
5

Yes.

Use the same format in both rules and just change the 25% to 0

6

This?

.modal {
  transform: translate(0, 0);
}

.modal.active {
  opacity: 1;
  transform: translateY(0%);
  z-index: 1000;
  pointer-events: initial;
  border-radius: 0;
  overflow: auto;
}
7

No. Why do you want to involve the x axis?

Just start with this:

.modal {
  transform: translateY(-25%);
}

And then in the active state:

.modal.active {
  transform: translateY(0);
}

Just be consistent.

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.