title: object adds velocity instead of maintaining in opposite direct
body: <p>I have a group of objects i want to rotate , there is a button which should onclick change from left to right and a stop button which should stop the current group position at its current location , however every time i click rotate , it changes direction but increases in speed even though it is bound to a slider, ive tried calling the animation frame last and cancelling it on each call but nothing works</p>
  <pre><code>            var speedslider = document.getElementById(&quot;speedinput&quot;);
              var direction = true;
              var stopped = true;
              
              speedslider.addEventListener(&quot;change&quot;,DirectionBTN.onclick);
              zoomOutButton.addEventListener(&quot;change&quot;, zoomOutFunction);
              speedslider.addEventListener(&quot;change&quot;,StopStartBTN.onclick);
              
              //rotation of group
              const rotateGroup = function() 
              {
                  if(stopped == true){
                      group.rotation.y =!group.rotation.y
                  }
                  if(direction == true){
                      group.rotation.y += speedslider.value/1000;
                      requestAnimationFrame(rotateGroup)
                      
                  }
                  if(direction == false){
                      group.rotation.y -= speedslider.value/1000;
                      requestAnimationFrame(rotateGroup)
                  }
              };
          //start rotation left
              StopStartBTN.onclick = function() {
                  stopped = !stopped
                  rotateGroup()
              };
              DirectionBTN.onclick = function() {
                  direction = !direction;
                  rotateGroup();
              };
  
  </code></pre>