CODEWITHSUNDEEP
javascriptjqueryhtmlcss-animations
Jordan Dunton
Jordan Dunton

Reputation: 171

Play a keyframe animation on first click and play back in reverse on second

I am trying to complete a wave animation that has the animation, fills the screen to a certain point and stops on the first click on a navigation menu. I have tried making it play the animation back in reverse when you click the navigation menu again, but it will not work. Does anyone know if this is possible with Java/ JQuery, and if so how do you do it? Currently all it does is a harsh clip back to the previous state, and I don't like how harshly it clips.

$(document).ready(function() {
  $('.hb_menu').click(function() {
    $('.line_1').toggleClass("rotate_1");
    $('.line_2').toggleClass("rotate_2");
    $('.line_3').toggleClass("rotate_2");
    $('.hidden_svg').toggleClass("show_svg");
    $('.circ').toggleClass("rotate_circ");
  });
});
body {
  font-family: 'Raleway', Arial, Verdana, sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: white;
}

.main_hd_cont {
  position: absolute;
  top: -1.25vw;
  left: 1.5vw;
  z-index: 4;
  color: white;
}

.main_hd_txt {
  font-size: 3.5vw;
  font-family: 'ballet_harmonyballet_harmony';
}

.navigation_svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: 100vw;
  width: 100vw;
}

.visible_svg {
  filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}

.hidden_svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 1s;
  z-index: 2;
  filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}

.show_svg {
  opacity: 1;
}

.hb_menu {
  max-width: 2vw;
  width: 2vw;
  max-height: 1.75vw;
  height: 1.75vw;
  position: absolute;
  right: 1.5vw;
  top: 1.5vw;
  z-index: 4;
}

.line_1,
.line_2,
.line_3 {
  max-width: 2vw;
  width: 2vw;
  max-height: .25vw;
  height: .25vw;
  background-color: #fff;
  position: absolute;
  right: 0;
  z-index: 2;
  top: 0vw;
  transition: .5s all;
  margin-bottom: .25vw;
}

.line_2 {
  top: .5vw;
}

.line_3 {
  top: 1vw;
}

.rotate_1 {
  transform: rotate(45deg);
}

.rotate_2 {
  transform: rotate(-45deg);
  top: 0vw;
}

.main_nav_cont {
  max-width: 50vw;
  width: 50vw;
  max-height: 50vw;
  height: 50vw;
  position;
  absolute;
  top: 25vw;
  left: 25vw;
  font-size: 1.75vw;
  z-index: 4;
}

.circ {
  position: absolute;
  top: -41vw;
  max-width: 45vw;
  width: 45vw;
  max-height: 48vw;
  height: 48vw;
  background-color: #8C572B;
  border-radius: 14.6675vw;
}

.rotating_circle_1 {
  left: -10vw;
}

.rotating_circle_2 {
  left: 10vw;
}

.rotating_circle_3 {
  left: 30vw;
}

.rotating_circle_4 {
  left: 50vw;
}

.rotating_circle_5 {
  left: 70vw;
}

.rotate_circ {
  animation: wave 15s 1 ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes wave {
  from {
    transform: rotate(360deg);
    max-height: 48vw;
    height: 48vw;
  }
  to {
    transform: rotate(-360deg);
    max-height: 80vw;
    height: 80vw;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Code Cafe | Home </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
  <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  <script src="../JavaScript/main.js"></script>
  <style>
    @font-face {
      font-family: 'ballet_harmonyballet_harmony';
      src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }
  </style>
</head>

<body>
  <section class="main_hd_cont">
    <header class="main_hd">
      <h1 class="main_hd_txt">Hello World</h1>
    </header>
  </section>

  </nav>
  </section>
  <section class="hb_menu">
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
  </section>
  <div class="rotating_circle_1 circ"></div>
  <div class="rotating_circle_2 circ"></div>
  <div class="rotating_circle_3 circ"></div>
  <div class="rotating_circle_4 circ"></div>
  <div class="rotating_circle_5 circ"></div>
</body>

</html>

Upvotes: 0

Views: 32

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

The last line in the JS portion of your code adds a clicked class to the .circ element. Once that class is on, the second click on your hamburger menu icon will trigger new unwave animation I made by just reversing the to and from values of the original wave animation.

$(document).ready(function() {
  $('.hb_menu').click(function() {
    $('.line_1').toggleClass("rotate_1");
    $('.line_2').toggleClass("rotate_2");
    $('.line_3').toggleClass("rotate_2");
    $('.hidden_svg').toggleClass("show_svg");
    $('.circ').toggleClass("rotate_circ");
    $(".circ").addClass("clicked"); // adds "clicked" after the very first click
  });
});
body {
  font-family: 'Raleway', Arial, Verdana, sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: white;
}

.main_hd_cont {
  position: absolute;
  top: -1.25vw;
  left: 1.5vw;
  z-index: 4;
  color: white;
}

.main_hd_txt {
  font-size: 3.5vw;
  font-family: 'ballet_harmonyballet_harmony';
}

.navigation_svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: 100vw;
  width: 100vw;
}

.visible_svg {
  filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}

.hidden_svg {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 1s;
  z-index: 2;
  filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}

.show_svg {
  opacity: 1;
}

.hb_menu {
  max-width: 2vw;
  width: 2vw;
  max-height: 1.75vw;
  height: 1.75vw;
  position: absolute;
  right: 1.5vw;
  top: 1.5vw;
  z-index: 4;
}

.line_1,
.line_2,
.line_3 {
  max-width: 2vw;
  width: 2vw;
  max-height: .25vw;
  height: .25vw;
  background-color: #fff;
  position: absolute;
  right: 0;
  z-index: 2;
  top: 0vw;
  transition: .5s all;
  margin-bottom: .25vw;
}

.line_2 {
  top: .5vw;
}

.line_3 {
  top: 1vw;
}

.rotate_1 {
  transform: rotate(45deg);
}

.rotate_2 {
  transform: rotate(-45deg);
  top: 0vw;
}

.main_nav_cont {
  max-width: 50vw;
  width: 50vw;
  max-height: 50vw;
  height: 50vw;
  position;
  absolute;
  top: 25vw;
  left: 25vw;
  font-size: 1.75vw;
  z-index: 4;
}

.circ {
  position: absolute;
  top: -41vw;
  max-width: 45vw;
  width: 45vw;
  max-height: 48vw;
  height: 48vw;
  background-color: #8C572B;
  border-radius: 14.6675vw;
}

.rotating_circle_1 {
  left: -10vw;
}

.rotating_circle_2 {
  left: 10vw;
}

.rotating_circle_3 {
  left: 30vw;
}

.rotating_circle_4 {
  left: 50vw;
}

.rotating_circle_5 {
  left: 70vw;
}

.rotate_circ {
  animation: wave 15s 1 ease-in-out;
  animation-fill-mode: forwards;
}

/* this new rule only applies after you have clicked once AND the wave animation has already been triggered */
.circ.clicked:not(.rotate_circ) {
  animation: unwave 15s 1 ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes wave {
  from {
    transform: rotate(360deg);
    max-height: 48vw;
    height: 48vw;
  }
  to {
    transform: rotate(-360deg);
    max-height: 80vw;
    height: 80vw;
  }
}
@keyframes unwave {
  from {
    transform: rotate(-360deg);
    max-height: 80vw;
    height: 80vw;
  }
  to {
    transform: rotate(360deg);
    max-height: 48vw;
    height: 48vw;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Code Cafe | Home </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
  <script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
  <script src="../JavaScript/main.js"></script>
  <style>
    @font-face {
      font-family: 'ballet_harmonyballet_harmony';
      src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
    }
  </style>
</head>

<body>
  <section class="main_hd_cont">
    <header class="main_hd">
      <h1 class="main_hd_txt">Hello World</h1>
    </header>
  </section>

  </nav>
  </section>
  <section class="hb_menu">
    <div class="line_1"></div>
    <div class="line_2"></div>
    <div class="line_3"></div>
  </section>
  <div class="rotating_circle_1 circ"></div>
  <div class="rotating_circle_2 circ"></div>
  <div class="rotating_circle_3 circ"></div>
  <div class="rotating_circle_4 circ"></div>
  <div class="rotating_circle_5 circ"></div>
</body>

</html>

Upvotes: 1

Related Questions