Easily Wait For An Element To Transition Into CSS Using Vanilla Native JavaScript

waitForElementTransition () is a JavaScript library that provides a “Wait For Element Transition” function to delay triggering JS code until the CSS transition effect on an element has ceased.

You can use this library and call the wait For Element Transition method to wait for the element to finish moving css before doing other things in your JavaScript code.


  • Easily wait for the css element to finish transition using JavaScript.
  • It allows you to keep the css properties of the transition/animation separate from your JS.
  • Native JavaScript without dependencies.
  • More secure and reliable than shift and shift events.
  • Nicely plays with the latest specifications.

How to make use of it:

1. Install the package with NPM.

$ npm i wait-for-element-transition --save

2. Import the waitForElementTransition element.

import waitForElementTransition from 'wait-for-element-transition';

3. Or from a CDN.

import waitForElementTransition from 'https://cdn.jsdelivr.net/npm/wait-for-element-transition/dist/wait-for-element-transition.js';

4. Apply the waitForElementTransition to the goal component which has a CSS transition impact.

waitForElementTransition(element).then(() => {
  alert('The transition effect is ended.');

Execute Codes Until An Element’s Transition Has Ended, waitForElementTransition() Plugin/Github, transition end, webkittransitionend, jquery transition end, ontransitionend, javascript on transition start, react on transition end

See Demo And Download

Official Website(markcellus): Click Here

This superior jQuery/javascript plugin is developed by markcellus. For extra Advanced Usages, please go to the official website.

Related Posts


A Simple Infinite Image Carousel Using Pure Javascript

simple infinite carousel, an extremely small, easy-to-use, and infinitely repetitive circular image slider created with regular JavaScript and CSS. Must Read: Flip Sliding Carousel Gallery Made Of…


A Vue3 Block Organization Tree View Component Library

Block tree is a simple organizational hierarchical horizontal or vertical tree view based on Vue3.x. It supports events, slots, horizontal visibility, and node processing. Thanks to hukaibaihu…


Front-End Image Preview For Mobile-Web Applications | imagePreview

Mobile JS photo preview plug-in supports rotation and zoom (two fingers / double click), and comfort and smoothness is the biggest pursuit. ImagePreview is an iOS-style, mobile-first,…


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Create Data Flows with Drag And Drop Flowchart Builder | Drawflow

Flow diagram allows you to create data streams easily and quickly. Install a JavaScript library only and have four lines of code. Draw flow is a JavaScript…


[mdb-ui-kit] Latest Bootstrap 5 & Material Design 2.0 UI KIT

Bootstrap Material Design UI KIT – Build responsive mobile projects on the web using the world’s most popular material design front-end component library. This is a pure…