Animate the width of a div element with CSS from the center

Question

Animate the width of a div element with CSS from the center

I'm working on a cool menu animation as a little experiment. Here's what I've got so far:

HTML

<div class="menu">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

SCSS

div.menu {
  width: 24px;
  height: 24px;
  position: relative;
  margin: 48px;
  cursor: pointer;

  div.bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #444;
    position: absolute;
    transition: all 0.25s ease-in-out;

    &:nth-child(1) {
    }

    &:nth-child(2) {
     top: 11px;
    }

    &:nth-child(3) {
     top: 11px;
    }

    &:nth-child(4) {
     bottom: 0;
    }
  }

  &.active {

    div.bar {
      &:nth-child(1) {
        width: 0;
    }

    &:nth-child(2) {
      transform: rotate(-45deg);
    }

    &:nth-child(3) {
     transform: rotate(45deg);
    }

    &:nth-child(4) {
     width: 0;
    }
    }
  }
}

JAVASCRIPT

var menu = document.querySelector('.menu');

menu.addEventListener('click', function(){
    menu.classList.toggle('active');
  });

You can see the demo of this in action here: https://codepen.io/mikehdesign/pen/eWJKKN

Right now, when the menu is active, the top and bottom div.bar reduce their width to 0 towards the left. I'd like them to reduce their width towards the center instead. I've tried adjusting margins but couldn't figure it out. If anyone has any suggestions or a different approach, please let me know. Thanks!

- Mike

javascript html css

Answer 1

Answer №1

To achieve this effect, you can utilize the CSS property transform-origin:

In relation to your specific dimensions, you would adjust the values by 12px upwards and downwards (using plus and minus), as shown in the code snippet below:

&.active {
  div.bar {
    &:nth-child(1) {
      transform-origin: 12px 12px;
      transform: scale(0);
    }

    &:nth-child(2) {
      transform: rotate(-45deg);
    }

    &:nth-child(3) {
      transform: rotate(45deg);
    }

    &:nth-child(4) {
      transform-origin: 12px -12px;
      transform: scale(0);
    }
  }
}

You can view the implementation here: JsFiddle Link

Answer 2

To achieve this effect, you can utilize the CSS property transform-origin:

In relation to your specific dimensions, you would adjust the values by 12px upwards and downwards (using plus and minus), as shown in the code snippet below:

&.active {
  div.bar {
    &:nth-child(1) {
      transform-origin: 12px 12px;
      transform: scale(0);
    }

    &:nth-child(2) {
      transform: rotate(-45deg);
    }

    &:nth-child(3) {
      transform: rotate(45deg);
    }

    &:nth-child(4) {
      transform-origin: 12px -12px;
      transform: scale(0);
    }
  }
}

You can view the implementation here: JsFiddle Link

Answer 3

Answer №2

If I were to break down the transform animation using pseudo elements, I would do it as follows: Check out this Demo (without scripts)

Here's what the HTML looks like (note that there are only three bars):

<input type="checkbox" id="toggle-menu" hidden>
<label for="toggle-menu" class="menu">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</label>

And here's the SCSS code:

// We use a two-step transition approach
// since translate and rotation can't be animated individually yet.
// The idea is to split up the animation using pseudo elements.

// Variables to control transition time and delay
$transition-time: 300ms;
$transition-delay: 300ms;

.menu {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    display: block;
}
.bar {
    height: 2px;
    position: absolute;
    top: 50%;
    width:100%;

    // Entering the 'hamburger' state
    // 1) Add a delay on bars to synchronize with :after elements
    // 2) :after elements have no delay
    transition: $transition-time $transition-delay; // 1

    &:after { 
        content:''; 
        display: table; 
        background: black; 
        position: inherit; 
        width: inherit; 
        height: inherit;
        transition: $transition-time; // 2
    }

    // Transform the bars into hamburger 
    &:nth-child(1){ transform: translateY(-8px); }
    &:nth-child(3){ transform: translateY(8px);}    
}

// When toggle-menu checkbox is checked, transform to 'X'
[id="toggle-menu"]:checked ~ .menu {
    .bar {
        // Entering the 'X' state
        // 1) Remove transform to animate bars to center
        // 2) Switch transition direction for bars and :after elements
        transform: none;  // 1  
        transition: $transition-time; // 2
        &:after { transition: $transition-time $transition-delay } // 2

        // Rotate the top and bottom :after elements
        &:nth-child(1):after{ transform: rotate(-45deg); }
        &:nth-child(3):after{ transform: rotate(45deg);}         

        // Hide the middle :after by scaling to zero
        // (when all bars are at the center)
        &:nth-child(2):after{ transform: scale(0); }        
    }
}

Answer 4

If I were to break down the transform animation using pseudo elements, I would do it as follows: Check out this Demo (without scripts)

Here's what the HTML looks like (note that there are only three bars):

<input type="checkbox" id="toggle-menu" hidden>
<label for="toggle-menu" class="menu">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</label>

And here's the SCSS code:

// We use a two-step transition approach
// since translate and rotation can't be animated individually yet.
// The idea is to split up the animation using pseudo elements.

// Variables to control transition time and delay
$transition-time: 300ms;
$transition-delay: 300ms;

.menu {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    display: block;
}
.bar {
    height: 2px;
    position: absolute;
    top: 50%;
    width:100%;

    // Entering the 'hamburger' state
    // 1) Add a delay on bars to synchronize with :after elements
    // 2) :after elements have no delay
    transition: $transition-time $transition-delay; // 1

    &:after { 
        content:''; 
        display: table; 
        background: black; 
        position: inherit; 
        width: inherit; 
        height: inherit;
        transition: $transition-time; // 2
    }

    // Transform the bars into hamburger 
    &:nth-child(1){ transform: translateY(-8px); }
    &:nth-child(3){ transform: translateY(8px);}    
}

// When toggle-menu checkbox is checked, transform to 'X'
[id="toggle-menu"]:checked ~ .menu {
    .bar {
        // Entering the 'X' state
        // 1) Remove transform to animate bars to center
        // 2) Switch transition direction for bars and :after elements
        transform: none;  // 1  
        transition: $transition-time; // 2
        &:after { transition: $transition-time $transition-delay } // 2

        // Rotate the top and bottom :after elements
        &:nth-child(1):after{ transform: rotate(-45deg); }
        &:nth-child(3):after{ transform: rotate(45deg);}         

        // Hide the middle :after by scaling to zero
        // (when all bars are at the center)
        &:nth-child(2):after{ transform: scale(0); }        
    }
}

Animate the width of a div element with CSS from the center

Answer №1

Answer №2

Similar questions

Unable to reach the array file

Change the position of a div by clicking a button using JavaScript

Utilizing $scope in $compile in Angular: A Comprehensive Guide

Need help resolving the issue of "Type Property '' does not exist on type 'IntrinsicAttributes & Function'? Let's find a solution together

Why is my <a> element not functioning properly?

Using Highstock for Dynamic Data Visualization in Web Applications

"Uncovering a memory leakage issue within a recursive polling function in JavaScript

Fixing Firefox Bug: How to Eliminate Non-Numeric Characters from "Number" Input Fields

How do I extract a specific property from an array of objects and assign it to a new array in Typescript 2?

Debugging on the server side of Meteor application is crucial for

As the week progresses, the cells corresponding to each weekday will automatically highlight, from Monday through Sunday. If today is Tuesday, the Tuesday cell will be highlighted accordingly. Please refer

Grid Alignment Centered - Inner Grid aligned to the left - Zero Javascript or Media Queries Allowed

Should tokens be sent via POST request or stored in a cookie?

What steps can I take to modify this HTML code so that my Tumblr background does not repeat and covers the entire page?

Button-click scrolling is our featured feature!

Exploring methods to trace the factory's property that is receiving updates from another factory within AngularJS

struggling to locate the file index (I've attempted numerous solutions from various forums with no success...)

Updating the URL-path in the Angular file-upload module: A step-by-step guide

Bootstrap 4 Landing Page Creation

Verification of Phone Numbers (Global)