logo
down
shadow

javascript stop animation not working


javascript stop animation not working

By : sai donaire
Date : November 22 2020, 02:42 PM
this one helps. The setPaused() method only changes the paused value on Ticker, but it is still dispatched. This might change in a future version of EaselJS, but currently the best way to pause your animation is to remove the "tick" listener from the stage.
code :
// Pause
createjs.Ticker.removeEventListener("tick", stage);

// Resume
createjs.Ticker.addEventListener("tick", stage);
// Add the listener to your own function instead of stage
createjs.Ticker.addEventListener("tick", tick);

var paused = false;
function tick(event) {
    if (!paused) {
        stage.update(event);
    }
}

// Then to toggle it, just change the "paused" property.
function handleButtonClick(event) {
    paused = !paused; // toggle on click
}


Share : facebook icon twitter icon
How to stop a javascript animation

How to stop a javascript animation


By : user2615789
Date : March 29 2020, 07:55 AM
With these it helps You can check whether the animation is still running in the handler.
For more details, please supply more details.
how to stop CSS animation without javascript

how to stop CSS animation without javascript


By : user3603203
Date : March 29 2020, 07:55 AM
This might help you Just set animation-iteration-count to 1. A value of infinite causes the animation to be repeated infinitely. And remember to style the object the way it should be AFTER the animation (top: 200px;).
I've updated the fiddle: http://jsfiddle.net/nTG42/2/
webkit animation play state: how to start/stop animation on demand with javascript

webkit animation play state: how to start/stop animation on demand with javascript


By : Anita Wright
Date : March 29 2020, 07:55 AM
I hope this helps you . For what you are trying to do, you don't need to use -webkit-animation-play-state.
Instead, try starting the animation by applying a class with the animation properties set. Then use a JavaScript event listener to remove the class once the animation finishes.
code :
@-webkit-keyframes pulse {
   from {
     opacity: 0.0;
     font-size: 100%;
   }
   to {
     opacity: 1.0;
     font-size: 400%;
   }
}

#INFO {
  opacity:0;
  position: absolute;
  left: 400px;
  top: 200px;
}

.pulse {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
}
var INFO = document.getElementById("INFO");
INFO.innerHTML = "WRONG";
INFO.style.color = "RED";

INFO.addEventListener('webkitAnimationEnd', function (e) {
  this.classList.remove('pulse');
});
While working with animation, clearInterval does not stop event triggered, or second animation does not get run

While working with animation, clearInterval does not stop event triggered, or second animation does not get run


By : John Doe
Date : March 29 2020, 07:55 AM
should help you out One way to do this was to use javascript Promises
Working example is below:
code :
    <html>
    <head></head>
    <body>
    <input type = 'button' value = 'up' onclick = 'up()'></input>
    <input type = 'button' value = 'down' onclick = 'down()'></input>
    <input type = 'button' value = 'left' onclick = 'left()'></input>
    <input type = 'button' value = 'right' onclick = 'right()'></input>
    <input type = 'button' value = 'Run' onclick = 'Run()'></input>
    <br />
    <br />
    <br />
    <div id = "square"></div>
    <script>
          var moves = [];
          leftpx = 0;
          downpx = 0;
          uppx = 0;
          rightpx = 0;
          var up = function() {

              moves.push('up')

          }

          var down = function() {

              moves.push('down')

          }

          var left = function() {

              moves.push('left')

          }

          var right = function() {

              moves.push('right')

          }


          function setTimeoutPromise(ms) {
              return new Promise(function(resolve) {
                  setTimeout(resolve, ms);
              });
          }

          function foo(item, ms) {
              return function() {
                  return setTimeoutPromise(ms).then(function() {
                      if (item == 'right') {
                          myMove4(100)
                      };
                      if (item == 'down') {
                          myMove2(100)
                      };
                      if (item == 'left') {
                          myMove3(-100)
                      };
                      if (item == 'up') {
                          myMove(-100)
                      };
                  });
              };
          }


          function bar() {
              var chain = Promise.resolve();
              moves.forEach(function(el, i) {
                  chain = chain.then(foo(el,  600));
              });
              return chain;
          }

          bar().then(function() {});


          var Run = function() {
              bar();
              moves = [];
          }

          function myMove(pos) {
              var elem = document.getElementById("square");
              var id = setInterval(frame, 5);
              var i = elem.style.top == '' ? 0 : parseInt(elem.style.top.replace('px', ''));
              pos = elem.style.top == '' ? pos : pos + i;

              console.log(i + ' ' + pos);

              function frame() {
                  if (elem.style.top == pos + 'px') {
                      clearInterval(id);
                  } else {


                      elem.style.top = (i--) + "px";


                  }
              }
          }

          function myMove2(pos) {
              var elem = document.getElementById("square");
              var id = setInterval(frame, 5);
              var i = elem.style.top == '' ? 0 : parseInt(elem.style.top.replace('px', ''));
              pos = elem.style.top == '' ? pos : pos + i;

              console.log(i + ' ' + pos);

              function frame() {
                  if (elem.style.top == pos + 'px') {
                      clearInterval(id);
                  } else {
                      //  pos++;

                      elem.style.top = (i++) + "px";


                  }
              }
          }

          function myMove3(pos) {
              var elem = document.getElementById("square");
              var id = setInterval(frame, 5);
              var i = elem.style.left == '' ? 0 : parseInt(elem.style.left.replace('px', ''));
              pos = elem.style.left == '' ? pos : pos + i;

              console.log(i + ' ' + pos);

              function frame() {
                  if (elem.style.left == pos + 'px') {
                      clearInterval(id);
                  } else {
                      //  pos++;

                      elem.style.left = (i--) + "px";


                  }
              }
          }


          function myMove4(pos) {
              var elem = document.getElementById("square");
              var id = setInterval(frame, 5);
              var i = elem.style.left == '' ? 0 : parseInt(elem.style.left.replace('px', ''));
              pos = elem.style.left == '' ? pos : pos + i;

              console.log(i + ' ' + pos);

              function frame() {
                  if (elem.style.left == pos + 'px') {
                      clearInterval(id);
                  } else {
                      //  pos++;

                      elem.style.left = (i++) + "px";


                  }
              }
          }
    </script>
    <style>



    #square{
  
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    animation: myfirst 5s linear 2s infinite alternate;
  
    }

    </style>


    </body>
    </html>
how to stop animation Javascript?

how to stop animation Javascript?


By : user3055235
Date : March 29 2020, 07:55 AM
To fix the issue you can do Animation.pause() is what you need.
From MDN:
Related Posts Related Posts :
  • How to hide a div from angular controller
  • Can Promise load multi urls in order?
  • How enable Hover event for bootstrap menus?
  • D3 scale.invert() isn't returning date for x
  • Parsing object to array using underscore js or lodash
  • ES6 with React and Browserify
  • AngularJS Factory return type undefined
  • javascript follow html input fields
  • how to declare a double array in javascript for this particular UI
  • Jquery : find length of mixed list
  • Returning the array before the function is complete & Angular JS
  • Javascript set value of class & hidden input in nested divs
  • Register custom filters with vue.js
  • Add class to input parent
  • Angular controller not talking to view
  • Trouble creating "if then" Javascript statement to change background color of page
  • Socket.IO - Middleware and scoping: how should I access global IO object from external middleware?
  • add class when input is valid in angularjs
  • Positioning multiple div elements
  • Checkbox clicking works, deselecting checkbox not working Javascript
  • Adding ajax jQuery File upload
  • Creating a dynamic array within a dynamic array in JQuery
  • Multiple File Upload actions for a single File Input PHP/JS
  • Want to move an added element to a different part of the DOM
  • Why can't I get Angularjs to work?
  • Minimizing browser window in Firefox & Chrome adds white space to right of page
  • I need to insert the date and time of employee stamp in and out into mysql database
  • Making css auto slider
  • why can't I defne the function first?
  • Pagination with MongoDB in Node.js (With Sorting)
  • How to repeat each() without page refresh
  • Position div at position of another div
  • Click handler is called multiple times in jQuery animate
  • How to multiply each element in an array with a different number (javascript)
  • Constructing a query string for JQuery getJSON for a public API GET request
  • Server side error generating RSS - what to return back to user/RSS reader?
  • ES6 code on Nodejs 4.x : Is V8 4.5 a native JS engine that runs ES6 directly?
  • How to only get new data without existing data from a Firebase?
  • How to set default option d3.js
  • using enum in Javascript for month number against name
  • React component only changes state on second onClick event
  • JavaScript text area: add line break
  • Unobtrusive jQuery unobtrusive validation not showing error spans
  • get the location for objects in a firebase array?
  • Multiple addEventListener not storing unique callbacks
  • JQuery, variable inside function not recognized by action
  • User input in Javascript
  • JavaScript Regex Remove Content from String
  • Is there a way to apply a mask on keydown? (JQuery)
  • Redirect A Live Website Visitor Without Them Refreshing or Clicking anything?
  • Exclude HTML tags when translating with Google Translate API
  • Posting to a ColdFusion function from angularJS
  • How to nullify the fadeout?
  • JS not updating on enquire.js breakpoints
  • AngularFire Check if item of same title exists
  • add names to objects based on object value
  • When do you use "class" versus "id"?
  • Get content of loaded SVG file
  • How to find size of an image file from canvas?
  • ui-sref="articles.view({articleId: article._id})" meaning?
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co