moveMe

Move HTML DOM elements on the fly!

Install

$ npm install --save moveme

Usage

const moveMe = require('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'
});

API

moveMe.toNext(element, [options])

Moves the given HTML DOM element to the next position relative to its current position.

moveMe.toPrevious(element, [options])

Moves the given HTML DOM element to the previous position relative to its current position.

moveMe.toFirst(element, [options])

Moves the given HTML DOM element to the first position of the parent node.

moveMe.toLast(element, [options])

Moves the given HTML DOM element to the last position of the parent node.

moveMe.toPosition(element, position, [options])

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.

Arguments

element

Type: object

HTML DOM element to move.

position

Type: number

Position where to move the element.

options

Type: object

animation

Type: string Values: fadeInOut none Default: fadeInOut

Animation name for the element's effect movement. It makes use of CSS transitions.

duration

Type: string Default: .4s

Duration of the transition effect. See transition duration docs.

timingFunction

Type: string Default: ease-in-out

Timing function name of the transition effect. See transition timing function docs.

delay

Type: string Default: 0s

Delay of the transition effect. See transition delay docs.

License

MIT © Hugo Matalonga