What is the best way for me to make my hamburger animation play in reverse?

Question

What is the best way for me to make my hamburger animation play in reverse?

Having trouble achieving smooth animation effects.

I've designed a burger icon using three divs:

<div class="container">
<div class="burger-contain">
    <div id="line-1" class="line"></div>
    <div id="line-2" class="line"></div>
    <div id="line-3" class="line"></div>
</div>
</div>

I have defined separate keyframes for each line:

.line:first-child {
   animation-name: firstChild;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   margin: 10px;
}

Here are the keyframes used:

@keyframes firstChild {
0% {transform: translateY(0);}
50% {transform: translateY(10px);}
100% {transform: rotate(-45deg);}
}

All three lines have slightly different animations. The second line disappears, while the third moves up instead of down.

To achieve the click function, I utilized jQuery to toggle between classes as follows:

$(document).ready(function(){

var line = $(".line");
var burger = $(".burger-contain")
var toggled = false;

burger.click(function(){
   triggerAnimation();
});

function triggerAnimation(){
   if (toggled === false){
   line.removeClass("reverse");
   line.addClass("animate");
   toggled = true;
} else {

   line.removeClass("animate");
   line.addClass("reverse");
   toggled = false; 
}

}


});

To reverse the animation, I intended to use animation-direction: reverse; in my CSS like this:

.line:first-child.reverse {
animation-name: firstChild;
transform-origin: 30px 25px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
margin: 10px;
animation-direction: reverse;
}

This is applied to all three lines. However, an issue arises where the animation stops functioning after the initial run. There seems to be no transition between the states, causing the animation to only work once in both directions - from Burger to Cross and vice versa.

Is there a flaw in my logic or am I misunderstanding the concept behind reversing animations?

jquery html css css-animations

Answer 1

Answer №1

Your understanding of the reverse concept may not be entirely accurate.

When an animation is set to play in reverse, it essentially goes back to its end state and starts over again with each cycle. The animation steps are reversed, and even the timing functions change accordingly—like ease-in becoming ease-out.^source

In your scenario, adding the 'reverse' attribute after the animation has already concluded will not restart the animation; instead, it will just swap the start and end states.

Let's consider a simple example. On hover, you'll notice a sudden jump in the animation instead of a fluid direction change because we have reversed the entire animation without adjusting the element's position. It's akin to observing a reflection in a mirror:

.box {
  width:50px;
  height:50px;
  background:red;
  animation:change 5s linear forwards;
}

@keyframes change {
  from {transform:translateX(0)}
  to {transform:translateX(300px)}
}

body:hover .box{
   animation-direction:reverse;
}

<div class="box">

</div>

After the animation completes, you can clearly see how the first and last states switch when hovering.

An alternate approach would be using transitions instead of animations, requiring less code for the effect.

Note: I've utilized 'hover,' but this can easily be replaced with a class toggle.

.menu {
  height:50px;
  width:60px;
  position:relative;
  margin:50px;
  background:
    linear-gradient(#000,#000) center/100% 10px no-repeat;
  transition:all 0s 0.5s;
}
.menu:before,
.menu:after{
  content:"";
  position:absolute;
  left:0;
  height:10px;
  width:100%;
  background:#000;
  transition:0.5s 0.5s top,0.5s 0.5s bottom,0.5s transform;
}
.menu:before {
  top:0;
}
.menu:after {
  bottom:0;
}

.menu:hover {
  background-size:0px 0px;
}

.menu:hover:before {
  top:calc(50% - 5px);
  transform:rotate(45deg);
  transition:0.5s top,0.5s 0.5s transform;
}

.menu:hover:after {
  bottom:calc(50% - 5px);
  transform:rotate(-45deg);
  transition:0.5s bottom,0.5s 0.5s transform;
}

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

Answer 2

Your understanding of the reverse concept may not be entirely accurate.

When an animation is set to play in reverse, it essentially goes back to its end state and starts over again with each cycle. The animation steps are reversed, and even the timing functions change accordingly—like ease-in becoming ease-out.^source

In your scenario, adding the 'reverse' attribute after the animation has already concluded will not restart the animation; instead, it will just swap the start and end states.

Let's consider a simple example. On hover, you'll notice a sudden jump in the animation instead of a fluid direction change because we have reversed the entire animation without adjusting the element's position. It's akin to observing a reflection in a mirror:

.box {
  width:50px;
  height:50px;
  background:red;
  animation:change 5s linear forwards;
}

@keyframes change {
  from {transform:translateX(0)}
  to {transform:translateX(300px)}
}

body:hover .box{
   animation-direction:reverse;
}

<div class="box">

</div>

After the animation completes, you can clearly see how the first and last states switch when hovering.

An alternate approach would be using transitions instead of animations, requiring less code for the effect.

Note: I've utilized 'hover,' but this can easily be replaced with a class toggle.

.menu {
  height:50px;
  width:60px;
  position:relative;
  margin:50px;
  background:
    linear-gradient(#000,#000) center/100% 10px no-repeat;
  transition:all 0s 0.5s;
}
.menu:before,
.menu:after{
  content:"";
  position:absolute;
  left:0;
  height:10px;
  width:100%;
  background:#000;
  transition:0.5s 0.5s top,0.5s 0.5s bottom,0.5s transform;
}
.menu:before {
  top:0;
}
.menu:after {
  bottom:0;
}

.menu:hover {
  background-size:0px 0px;
}

.menu:hover:before {
  top:calc(50% - 5px);
  transform:rotate(45deg);
  transition:0.5s top,0.5s 0.5s transform;
}

.menu:hover:after {
  bottom:calc(50% - 5px);
  transform:rotate(-45deg);
  transition:0.5s bottom,0.5s 0.5s transform;
}

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

Answer 3

Answer №2

Here is a working example: https://jsfiddle.net/upnhcw69/38/

The solution involves utilizing 2 animations and switching between them to ensure they are triggered correctly.

Upon the first click, the `firstChild` animation is activated, followed by the activation of the `firstChild2` animation upon the second click. These animations are defined using two classes with distinct properties.

.line{
   height: 10px;
   width: 100px;
   margin: 10px;
   background-color:red;
}

@keyframes firstChild {
  0% {transform: translateY(0);}
  50% {transform: translateY(10px);}
  100% {transform: rotate(-45deg);}
}

@keyframes firstChild2 {
  0% {transform: rotate(-45deg);}
  50% {transform: translateY(10px);}
  100% {transform: rotate(0deg);}
}

.animate {
   animation-name: firstChild;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
}

.reverse {
    animation-name: firstChild2;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
}

Answer 4

Here is a working example: https://jsfiddle.net/upnhcw69/38/

The solution involves utilizing 2 animations and switching between them to ensure they are triggered correctly.

Upon the first click, the `firstChild` animation is activated, followed by the activation of the `firstChild2` animation upon the second click. These animations are defined using two classes with distinct properties.

.line{
   height: 10px;
   width: 100px;
   margin: 10px;
   background-color:red;
}

@keyframes firstChild {
  0% {transform: translateY(0);}
  50% {transform: translateY(10px);}
  100% {transform: rotate(-45deg);}
}

@keyframes firstChild2 {
  0% {transform: rotate(-45deg);}
  50% {transform: translateY(10px);}
  100% {transform: rotate(0deg);}
}

.animate {
   animation-name: firstChild;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
}

.reverse {
    animation-name: firstChild2;
   transform-origin: 30px 25px;
   animation-duration: 0.5s;
}

What is the best way for me to make my hamburger animation play in reverse?

Answer №1

Answer №2

Similar questions

Tips on personalizing the DateTimePicker component from Material-UI

Switching a boolean value in Rails 4 using link_to

Adjusting Anchor Links to Account for a Fixed Header

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Creating CSS wrappers around div elements of varying sizes

Using the novalidate attribute in Angular 4.0.0

What could be causing the issue of Vuejs 3.3 defineModel consistently returning undefined?

Guide on incorporating a JS file in a React application

Video player on website experiencing issues with playing VAST ads

retrieve data from jsp page using ajax request

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

The art of styling <li> elements compared to <a> elements

Menu Items at the Center

Exploring Java Programming with HTMLEditorKit

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Widget for navigating through Youtube videos

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Tips for utilizing a select in a jQuery function

Displaying JSON data after a successful AJAX call