movement

Movement is a simple JQuery library to animate DOM by scroll position.

Usage

Movement depends on JQuery, so the JQuery Js file and the movement Js File should be add on HTML doc. Place the code below on the page load and change the properties as needed.

$.movement({
  properties: [
    // Aimate DOM 1
    {
      selector: '#man',
      start_time: 424,
      end_time: 757,
      name: 'left',
      type: 'ease-out-back',
      start_value: 20,
      end_value: 50,
      unit: '%'
  },
  // Animate DOM 2
  {
    selector: '#man',
    start_time: 424,
    end_time: 757,
    name: 'bottom',
    type: 'ease-out-back',  
    start_value: 110,
    end_value: 240,
    unit: 'px'
  }// , Animate DOM n 
  ]
});

The move can be used with a single DOM element using the JQuery syntax, as in the code below. You can animate as many css properties as you need.

$('#man').movement({
  properties: [
    { 
      name: 'left',
      type: 'ease-out-cubic',
      start_value: 20,
      end_value: 50,
      unit: '%'
    },
    {
      name: 'bottom',
      type: 'ease-out-back',
      start_value: 110,
      end_value: 240,
      unit: 'px'
    }
  ],
  start_time: 424,
  end_time: 757
});

Properties

Name | Description ------- | ------- name | Name of css propertie to animate EX.: left, right, margin, etc type | Animation effect to smoth the animation start_value | Start value of css propertie end_value | End value of css propertie start_time | Value of screen position where the animation have to start end_time | Value of screen position where the animation should stop selector | css selector to determine the DOM element that will be animated unit | Unit of css propertie EX.: %, px, pc, etc

Animation smoth types

Movemnt suport the most commum smooth effects

• linear
• ease-in-quadratic
• ease-out-quadratic
• ease-in-out-quadratic
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quartic
• ease-out-quartic
• ease-in-out-quartic
• ease-in-quintic
• ease-out-quintic
• ease-in-out-quintic
• ease-in-sinusoid
• ease-out-sinusoid
• ease-in-out-sinusoid
• ease-in-exp
• ease-out-exp
• ease-in-out-exp
• ease-in-circ
• ease-out-circ
• ease-in-out-circ
• ease-in-elastic
• ease-out-elastic
• ease-in-out-elastic
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-bounce
• ease-out-bounce
• ease-in-out-bounce