moveme v0.4.0

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