How To Pause The Animation In Javascript

The CSS animations and transitions are potent ways of animating backdrop in our stylesheet with the assist of the browser. With the two related JavaScript events, chosen animationend and transitionend , nosotros can practice even more.

Using transition and animation, we can brand complex animations with just CSS, and the browser will exercise the difficult work. In this way, we can achieve smoothen lx FPS animations with simply a few lines.

Alone the stylesheet animation is often plenty, only there are scenarios when we need more. For example, when we want to find the terminate of the animation; which if not so frequent but happens in complicated stuff. If we're going to take hold of the completion of animation we need an event base callback where we can run our related code.

Before the Web Animations API there wasn't any high-level animation API in JavaScript. Today this is differently supported in the browsers, but we tin use dissimilar JS libraries like GSAP to make more.

About Transition and Animation Finish

The two events are similar whatever other blazon of outcome, simply these are triggered when a CSS animation or transition arrived at the end of the actual bicycle.

You set your movement like y'all e'er do, and as well configure the JavaScript part (add, remove classes on different interactions in case of a transition) if needed. You add a new event listener to the element to catch the completion of the animation.

Depending on what type of blitheness method you use, you have to gear up the correct event: transitionend or animationend.

To find the events you can also use the ontransitionend and onanimationend backdrop.

Catch the Transitionend Event

Allow'southward see a bones case of a transition. We will toggle a class named animate on the circle element. The catch is that when the movement stops, we will remove the previously appended selector to create a bounce effect (the item returns to the start position).

Using the transitionend, we tin can correctly take hold of the correct moment for the course to remove. Note that nosotros removed the transitionend result listener subsequently the event triggered and then the next time it doesn't duplicate (for this you lot demand a unique callback role) itself. Always a good practice to destroy the unnecessary event listeners!

let item = document.querySelector('.circumvolve');  particular.addEventListener('click', (eastward) => {     particular.classList.toggle('breathing');     particular.addEventListener(transitionEvent, transitionEndCallback); });  transitionEndCallback = (e) => {     detail.removeEventListener(transitionEvent, transitionEndCallback);     item.classList.remove('animate'); }

See the Pen
Catch Transition Cease with JavaScript by Adam Laki (@adamlaki)
on CodePen.

Take hold of Simply the Needed Property Proper name

Every bit you see in this example, we used transition: transform 1s; line to motion our element. The catched transitioned belongings is the transform. But what if we accept multiple changes/transitions (which needed to a sophisticated result)? Well, we can identify them with the event object'due south propertyName holding, which gives back the electric current name of the transitioned property.

if (!issue.propertyName === 'meridian') return;

Annotation that you can also accept access to this property catching animationend .

Catch the Animationend Event

We fabricated the same event in example of the animation example. Although in the CSS logic it looks different, the JavaScript part practice the same. Nosotros declared a single keyframe which transforms the object by the Y-axis back and forth.

var particular = document.querySelector('.circle');  item.addEventListener('click', (e) => {     item.classList.toggle('animate');     item.addEventListener('animationend', animationEndCallback); });  animationEndCallback = (e) => {     detail.removeEventListener('animationend', animationEndCallback);     detail.classList.remove('animate'); }

Note that here y'all can use the event name helper part also (like in the get-go CodePen example), but instead of transitionend outcome name you have to apply animationend.

See the Pen
animationend Vanilla JavaScript by Adam Laki (@adamlaki)
on CodePen.

Apply the Right Upshot name

There is a catch with the outcome names: you lot need prefixes if you lot want to support legacy browsers. There be two simple helpers (from David Walsh) which help yous identify the correct event name.

whichTransitionEvent = () => {     let t,     el = document.createElement("fakeelement");      let transitions = {         "transition" : "transitionend",         "OTransition" : "oTransitionEnd",         "MozTransition" : "transitionend",         "WebkitTransition": "webkitTransitionEnd"     }      for (t in transitions){         if (el.mode[t] !== undefined){             render transitions[t];         }     } }

The Old Way of Detecting the End of an Blitheness

Nice to know that the onetime way to make some callback like behavior is to utilize a timeout (using setTimeout function) with the transition or animation interval when switching the state. It is not the best solution because of the browser's optimized working processes.

Although in the good old days we didn't have whatsoever correct solution now with the events we can catch only the end.

Closing remarks

You won't use this technique in your normal development, but it tin exist handy. We developed an off-canvas navigation lately, and to brandish a groundwork overlay when the menu is open, we had to take hold of the stop of the opening blitheness.

If you want to animate with class switching, you can do it easily through the classList API.

Source: https://pineco.de/detect-the-end-of-transition-and-animation-with-the-help-of-javascript/

Posted by: sullivanwhinged.blogspot.com

Share this post