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>

Gerard · Accepted Answer · 2022-12-29 05:00:12Z

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>

edited Dec 29, 2022 at 5:00

answered Dec 28, 2022 at 11:18

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Glenn Ferrie Over a year ago

I like this solution a lot. can that has operation take arguments like: .center-pane:hover OR .right-pane:hover -- I guess I could have separate rule for each and widen the column in focus. I am second-guessing this "columns-in-motion" thing... just trying to provide more room for the content in focus, but all of the motion is giving me vertigo

Gerard Over a year ago

@GlennFerrie I adjusted the code to facilitate the OR question.

SnoopFrog · Accepted Answer · 2022-12-28 05:25:33Z

1

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.

edited Dec 28, 2022 at 5:25

answered Dec 28, 2022 at 5:19

SnoopFrog

7193 silver badges11 bronze badges

1 Comment

Glenn Ferrie Over a year ago

this is a great response. I ended up implementing the solution with the ‘grid-template-columns‘ approach

Collectives™ on Stack Overflow

CSS or JavaScript for animation

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related