Opening vertically instead of horizontally

[asasass]

How would the transition code be written for it to open vertically instead of horizontally?

code: https://jsfiddle.net/q5cLpo06/

[PaulOB]

This:

.panel-left,
.panel-right {
  position: absolute;
  height: 50%;
  width: 100%;
  left:0;
  transition: all ease 8s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  top: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  bottom: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 200%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;
}

.panel-right::before {
  top: -100%;
}

.curtain.slide .panel-left {
  transform: translateY(-100%);
}

.curtain.slide .panel-right {
  transform: translateY(100%);
}

Also a prime reason why should avoid classes like panel-left/right as they are no longer on the left or right but on the top and bottom.

[asasass]

How would you do that same thing with a gradient?

I wasn’t able to get it, I messed it up.

code: https://jsfiddle.net/j9cp0bqe/2/

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
}

.panel-left {
  left: 0%;

  background: linear-gradient(to bottom right, #b968c5, skyblue);
  background-position: 0 100%;
  background-size: 200%;
}

.panel-right {
  left: 50%;

  background: linear-gradient(to bottom right, #b968c5, skyblue);
  background-position: 100% 0;
  background-size: 200%;
}

.curtain.slide .panel-left {
  left: -50%;
}

.curtain.slide .panel-right {
  left: 100%;
}

[PaulOB]

Something like this:

.panel-left,
.panel-right {
  position: absolute;
  height: 50%;
  width: 100%;
  /*top: 0%;*/
  left:0;
  transition: all ease 8s;
}

.panel-left {
  /*left: 0%;*/
  top:0;
  background: linear-gradient(to bottom right, #b968c5, skyblue);
  background-position:0 0;
  background-size:100% 200%;
}

.panel-right {
 /* left: 50%;*/
 bottom:0;
  background: linear-gradient(to bottom right, #b968c5, skyblue);
  background-position:0% 100%;
  background-size: 100% 200%;
}

.curtain.slide .panel-left {
transform:translateY(-100%);
}

.curtain.slide .panel-right {
  transform:translateY(100%);
}

[asasass]

I think that this:
code https://jsfiddle.net/gfxpo7cy/3/

.curtain.slide .panel-left {
  top: -50%;
}

.curtain.slide .panel-right {
  bottom: -50%;
}

is equivalent to this:
code https://jsfiddle.net/uk0vmxh3/2/

.curtain.slide .panel-left {
transform:translateY(-100%);
}

.curtain.slide .panel-right {
  transform:translateY(100%);
}

Am I right?

They both seem to be at the same speed.

Which is weird because, the horizontal gradient is set up with different numbers.
code https://jsfiddle.net/j9cp0bqe/2/

.curtain.slide .panel-left {
  left: -50%;
}

.curtain.slide .panel-right {
  left: 100%;
}

[PaulOB]

@asasass

Am I right?

The positions will be the same but as explained about three times now it’s not good to move things with position because transform is more performant and better to use.

You may not visually notice the difference but the transform is smoother especially when other things are going on. People with slower machines may also notice the difference.

[asasass]

I know, I was just seeing if I was able to figure it out.