Move HTML DOM elements on the fly!
$ npm install --save moveme # or yarn add -D movemeimport * as moveMe from 'moveme';
const someElement = document.querySelector('#someId');
// Moves to the next position relative to the parent
moveMe.toNext(someElement);
// Moves to the previous position relative to the parent
moveMe.toPrevious(someElement);
// Moves to the last position of the parent node
moveMe.toLast(someElement);
// Moves to the first position of the parent node
moveMe.toFirst(someElement);
// Moves to the third position of the parent node
moveMe.toPosition(someElement, 3);
// You can also set additional options
moveMe.toNext(someElement, {
duration: '.6s',
timingFunction: 'linear',
delay: '1s'
});Moves the given HTML DOM element to the next position relative to its current position.
Moves the given HTML DOM element to the previous position relative to its current position.
Moves the given HTML DOM element to the first position of the parent node.
Moves the given HTML DOM element to the last position of the parent node.
Moves the given HTML DOM element to the given position of the parent node.
Note: When a movement is not possible, either a position is not value or the element is already at the requested position, all methods will stop with a return statement.
Type: object
HTML DOM element to move.
Type: number
Position where to move the element.
Type: object
Type: string
Values: fadeInOut none
Default: fadeInOut
Animation name for the element's effect movement. It makes use of CSS transitions.
Type: string
Default: .4s
Duration of the transition effect. See transition duration docs.
Type: string
Default: ease-in-out
Timing function name of the transition effect. See transition timing function docs.
Type: string
Default: 0s
Delay of the transition effect. See transition delay docs.
MIT © Hugo Matalonga