title: Jquery, animate on click and on page scroll
body: <p>I have 2 divs named .yellow and .orange</p>
  <p>When the user clicks .yellow, both itself and .orange animate to the corner.</p>
  <p>When the user clicks .orange, only itself and animates to the corner.</p>
  <p>If either is in the corner and are clicked then they both animate back out to their starting position.</p>
  <p>I want both .yellow and .orange to animate to the corner on page scroll and then be clickable to animate back out. At the moment they either do nothing or jump around crazily.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;style&gt;
          .holder             { position: fixed; width: 100%; height: 100%; overflow: hidden; }
          .yellow         { background-color: #F3CD3A; position: absolute; /*transition: 0.3s;*/ padding: 2%; box-shadow: 0px 5px 5px;
                                right: 50%; bottom: 50%; width: 300px; height: 300px; z-index: 998; }
          .yellow:hover  { background-color: #E4BF30; }
          .orange         { background-color: #F68055; position: absolute; /*transition: 0.2s;*/ padding: 2%; box-shadow: 0px 5px 5px;
                                right: 45%; bottom: 40%; width: 100px; height: 100px; z-index: 999; }
          .orange:hover  { background-color: #ED7447; }
          .content { height: 400vh; }
      &lt;/style&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          // $(document).click(function (event) { click whole screen
          $(document).ready(function() {
              var sideMenu = true;
              $(".orange").click(function() {
                  if (!sideMenu) {
                      $(".orange").animate({right: "45%", bottom: "40%"}, 250, 'swing');
                      sideMenu = true;
                  }
                  else {
                      $(".orange").animate({right: "0", bottom: "0"}, 250, 'swing');
                      sideMenu = false;     
                  }
              });
              var sideMenu2 = true;
              $(".yellow").click(function() {
                  if (!sideMenu2) {
                      $(".yellow").animate({right: "50%", bottom: "50%"}, 250, 'swing');
                      sideMenu2 = true;
                      $(".orange").animate({right: "45%", bottom: "40%"}, 250, 'swing');
                      sideMenu = true;
                  }
                  else {
                      $(".yellow").animate({right: "0", bottom: "0"}, 250, 'swing');
                      sideMenu2 = false;
                      $(".orange").animate({right: "0", bottom: "0"}, 250, 'swing');
                      sideMenu = false;  
                  }
              });
              $(window).scroll(function() {
                   $(".yellow").animate({right: "0", bottom: "0"}, 250, 'swing');
                      sideMenu2 = false;
                      $(".orange").animate({right: "0", bottom: "0"}, 250, 'swing');
                      sideMenu = false;
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="holder"&gt;
          &lt;div class="yellow"&gt;
              Yellow
          &lt;/div&gt;
          &lt;div class="orange"&gt;
              Orange
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean leo justo, mollis vel tortor eget, rutrum gravida tortor. Donec nisi elit, eleifend ac risus in, euismod eleifend mi. Donec vel ipsum tristique, elementum velit non, venenatis nunc. Morbi non lorem vel orci faucibus porttitor non pretium ante. Mauris sit amet ipsum eget erat ultrices pellentesque. Sed varius ex in felis facilisis, ut scelerisque urna maximus. Suspendisse lobortis justo vitae est faucibus, quis tempor tellus rhoncus. Quisque fermentum tortor in aliquam pulvinar. Praesent fermentum ligula nulla, in pellentesque tellus lacinia nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras id finibus nibh. Nullam facilisis nulla iaculis luctus gravida. Sed et sollicitudin diam, quis imperdiet ante.
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>