How to toggle Font Awesome animated icons?

Question

I pick up on this question.

$('.lock').click(function() {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock').css('color', 'green');
  }, 600);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>

A click on the red lock icon starts an animation which leads to the green unlock icon. Now a click on the green unlock icon should do the corresponding opposite. How to toggle both icons?

Answer 1

You can't animate two different icons to get a real unlock effect. But, if not critical, you can create your own svg icon and animate.

unlock effect

$('#icon').click(function() {
  $('#icon').toggleClass('green');
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: hsl(201, 27%, 10%);
  color: white;
  display: grid;
  place-items: center;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />

<style>
#icon {
  width: 52px; /* adjust icon size  */
  height: auto;
  cursor: pointer;
}
#icon rect,
#icon path {
  transition: all 0.5s ease-in-out;
}

#icon rect {
  fill: red;
}
#icon path {
  stroke: red;
  stroke-dasharray: 30;
  stroke-dashoffset: 5;
  fill: none;
}

#icon.green rect {
  fill: green;
}
#icon.green path {
  stroke: green;
  stroke-dasharray: 20;
}
</style>

<div id="icon" class="fa-5x fa-stack lock">
  <svg viewBox="0 0 22 25">
    <rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3"/>
    <path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592"stroke-width="3.5" />
  </svg>
</div>

rotation effect

$('#box').click(function() {
  $('#box').toggleClass('unlock');
});

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: hsl(201, 27%, 10%);
  color: white;
  display: grid;
  place-items: center;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />

<style>
   :root {
    --duration-rotate: 1s;
    --delay: 1s;
  }
  
  #green,
  #red {
    backface-visibility: visible;
    transition: all var(--duration-rotate) ease-in-out;
  }
  
  #red {
    transition-delay: var(--delay);
  }
  
  #green {
    transform: rotateY(-270deg);
    transition-delay: 0s;
  }
  
  #box.unlock #red {
    transform: rotateY(90deg);
    backface-visibility: hidden;
    transition-delay: 0s;
  }
  
  #box.unlock #green {
    transform: rotateY(-360deg);
    backface-visibility: visible;
    transition-delay: var(--delay);
  }
</style>

<div id="box" class="fa-5x fa-stack lock">
  <i id="green" class="fas fa-unlock fa-stack-1x" style="color: green"></i>
  <i id="red" class="fas fa-lock fa-stack-1x" style="color: red"></i>
</div>

Answer 2

You can adjust the JS to save whether or not it's in a locked state in a variable that you check to apply the correct styling and flip it after each time, like this

let locked = true;
$('.lock').click(() => {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    if (locked) {
      $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
      $('.fa-unlock').css('color', 'green');
    } else {
      $('.fa-lock').css('color', 'red');
      $('.fa-unlock').css('color', 'rgba(0, 0, 0, 0)');
    }
    locked = !locked;
  }, 100); // To change lock & unlock speed. 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>