CSS or JavaScript for animation

Question

I want to change my code so that the when my layout changes there is a sliding animation.

It is a 3 column layout and I want the left-most column to shrink a but when the user is focused on the right 2/3 of the screen.

I wrote a simple codepen demoing my code.

I am using JS to transition between two CSS classes, but I wanted to add an sliding transition to it.

I'm not sure if this should be 100% CSS or if I need to use some jQuery animation to get the desired effect.

Codepen: https://codepen.io/glennferrie/pen/vYaLpXo

const leftPane = document.getElementById('leftpane');
const centerPane = document.getElementById('centerpane');
const rightPane = document.getElementById('rightpane');
var addMode2 = function() {
  leftPane.classList.add("mode-2");
  rightPane.classList.add("mode-2");
  centerPane.classList.add("mode-2");
}
var removeMode2 = function() {
  leftPane.classList.remove("mode-2");
  rightPane.classList.remove("mode-2");
  centerPane.classList.remove("mode-2");
}
leftPane.addEventListener("mouseover", function(ev) {
  removeMode2();
});
centerPane.addEventListener("mouseover", function(ev) {
  addMode2();
});
rightPane.addEventListener("mouseover", function(ev) {
  addMode2();
});

.container {
  background-color: lightblue;
  font-family: sans-serif;
  font-size: 1.1em;
}

.left-pane,
.center-pane,
.right-pane {
  padding-block-start: 10vh;
  display: inline-block;
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
}

.left-pane {
  width: 25vw;
  background-color: yellow;
}

.center-pane {
  width: 40vw;
}

.right-pane {
  width: 33vw;
  background-color: aquamarine;
}

.left-pane.mode-2 {
  width: 10vw;
}

.center-pane.mode-2 {
  width: 47vw;
}

.right-pane.mode-2 {
  width: 40vw;
}

<div class="container">
  <div class="left-pane" id="leftpane">
    Left Pane Content
  </div>
  <div class="center-pane" id="centerpane">
    Center Pane Content
  </div>
  <div class="right-pane" id="rightpane">
    Right Pane Content
  </div>
</div>

Answer 1

You can use a grid and animate the width of the columns. The solution below uses the has() pseudo-code which is not yet supported by Firefox.

* {
  box-sizing: border-box;
}

.container {
  background-color: lightblue;
  font-family: sans-serif;
  font-size: 1.1em;
  display: grid;
  /* Default setting equal width for all columns */
  grid-template-columns: 2fr 2fr 2fr;
  transition: grid-template-columns 0.5s ease-in-out;
}

.left-pane,
.center-pane,
.right-pane {
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
}

.left-pane {
  background-color: yellow;
}

.right-pane {
  background-color: aquamarine;
}

/* When center pane OR right pane is hovered, adjust the width of the columns of the parent */
.container:has(.center-pane:hover), .container:has(.right-pane:hover) {
  grid-template-columns: 1fr 2.5fr 2.5fr;
}

<div class="container">
  <div class="left-pane">
    Left Pane Content
  </div>
  <div class="center-pane">
    Center Pane Content
  </div>
  <div class="right-pane">
    Right Pane Content
  </div>
</div>

Answer 2

You can achieve that by adding transition property for your .left-pane, .center-pane, .right-pane elements inside CSS. It is best to have it for all three panes as they all change their width on hover.

Here's an example:

.left-pane, .center-pane, .right-pane {
  padding-block-start: 10vh;
  display: inline-block;
  outline: dotted 2px #333;
  height: 95vh;
  text-align: center;
  /*  Transition for the width  */
  transition: 250ms width ease;
}

As you can see I added 3 properties for the transition.

First is time which defines how long will your animation take to complete. Second is property you want to animate, in your case it's width and the last one is the interpolator, by default it is set to linear which might be something you want but you can change it, I set it to ease to make effect more pleasing to the eyes.

You can read more about transition to learn about all the possibilities in the docs.