Framation NPM | npm.io

framation

Animation utility plugin using javascript or jquery

Install

using npm

# npm
npm install framation --save
# yarn
yarn add framation

dowonload source & import script

<!doctype html>
<html>
  <head>
    <script src="path/to/framation.min.js"></script>
  </head>
</html>

Usage

html

<div class="test"></div>

javascript

import Framation from 'framation';
// or
const Framation = require('framation');

var ani = new Framation();

ani
  .set(document.querySelector('.test'), {left: '100px', time: 2000})  // test element move left 100px during 2seconds
  .set(document.querySelector('.test'), {left: '200px', time: 2000})  // test element move left 200px during 2seconds after move left 100px

Framation

Kind: global class

Framation
- new Animate()
- .this.isIE : boolean
- .this.isAnimation : boolean
- .this.enable : boolean
- .this.queue : Array
- .this.div : boolean
- .this.cssEase : Object
- .this.transform : string
- .this.transition : string
- .this.transitionDuration : string
- .this.transitionTimingFunction : string
- .this.transform3d : boolean
- .getVendorPropertyName() ⇒ string
- .checkTransform3dSupport() ⇒ boolean
- .getTransform(style) ⇒ Object
- .clear() ⇒ Object
- .pause() ⇒ Object
- .play() ⇒ Object
- .set() ⇒ Object
- .destroy()

new Framation()

Framation class

Animate.this.isIE : boolean

is IE browser

Kind: static property of Animate

Animate.this.isAnimation : boolean

animation operate

Kind: static property of Animate

Animate.this.enable : boolean

animation enable

Kind: static property of Animate

Animate.this.queue : Array

animation queue

Kind: static property of Animate

Animate.this.div : boolean

animation target div

Kind: static property of Animate

Animate.this.cssEase : Object

css ease object

Kind: static property of Animate Properties

Name	Type	Description
_default	string	ease
in	string	ease-in
out	string	ease-out
in-out	string	ease-in-out
snap	string	cubic-bezier(0,1,.5,1)
easeOutCubic	string	cubic-bezier(.215,.61,.355,1)
easeInOutCubic	string	cubic-bezier(.645,.045,.355,1)
easeInCirc	string	cubic-bezier(.6,.04,.98,.335)
easeOutCirc	string	cubic-bezier(.075,.82,.165,1)
easeInOutCirc	string	cubic-bezier(.785,.135,.15,.86)
easeInExpo	string	cubic-bezier(.95,.05,.795,.035)
easeInOutExpo	string	cubic-bezier(1,0,0,1)
easeInQuad	string	cubic-bezier(.55,.085,.68,.53)
easeOutQuad	string	cubic-bezier(.25,.46,.45,.94)
easeInOutQuad	string	cubic-bezier(.455,.03,.515,.955)
easeInQuart	string	cubic-bezier(.895,.03,.685,.22)
easeOutQuart	string	cubic-bezier(.165,.84,.44,1)
easeInOutQuart	string	cubic-bezier(.77,0,.175,1)
easeInQuint	string	cubic-bezier(.755,.05,.855,.06)
easeOutQuint	string	cubic-bezier(.23,1,.32,1)
easeInOutQuint	string	cubic-bezier(.86,0,.07,1)
easeInSine	string	cubic-bezier(.47,0,.745,.715)
easeOutSine	string	cubic-bezier(.39,.575,.565,1)
easeInOutSine	string	cubic-bezier(.445,.05,.55,.95)
easeInBack	string	cubic-bezier(.6,-.28,.735,.045)
easeOutBack	string	cubic-bezier(.175, .885,.32,1.275)
easeInOutBack	string	cubic-bezier(.68,-.55,.265,1.55)

Animate.this.transform : string

transform

Kind: static property of Animate

Animate.this.transition : string

transition

Kind: static property of Animate

Animate.this.transitionDuration : string

transition duration

Kind: static property of Animate

Animate.this.transitionTimingFunction : string

transition timing function

Kind: static property of Animate

Animate.this.transform3d : boolean

transform 3d

Kind: static property of Animate

Animate.getVendorPropertyName() ⇒ string

return prop name using browser engine

Kind: static method of Animate Returns: string - prop name

Animate.checkTransform3dSupport() ⇒ boolean

return support 3d transform

Kind: static method of Animate Returns: boolean - transform3d support

Animate.getTransform(style) ⇒ Object

return target's transform to object

Kind: static method of Animate Returns: Object - transform object

Param	Type	Description
style	Object	style object

Animate.clear() ⇒ Object

clear animation

Kind: static method of Animate Returns: Object - Ani Example

ani1
   .clear();

 ani
   .set(function () {
   });

Animate.pause() ⇒ Object

pause animation

Kind: static method of Animate Returns: Object - Ani Example

ani1
   .set({target, 'left', '50%'})
   .pause();

Animate.play() ⇒ Object

play animation

Kind: static method of Animate Returns: Object - Ani

Animate.set() ⇒ Object

animation set

Kind: static method of Animate Returns: Object - Ani Example

ani1
  .set(target, 'left', '50%') // move target element left 50%
  .set(target2, { time: 1000, left: '0%' }) // move target2 element left 0%
  .set(function () {  // animation pause and start after 2seconds
    var self = this,
        timer = null;

    this.pause();
    console.log('pause');

    timer = setTimeout(function () {
      self.play();
      console.log('play');
    }, 2000);
  })
  .set(target, {ease: 'easeInOutBack', time: 4000, left: '50%', top: '50%'})  // target element set ease and left 50%, top 50% during 4s
  .set(target, {  // target add test class maintain animation 1s
    time: 1000,
    func: function () {
      $(target).addClass('test');
    }
  })