https://github.com/luwes/morph.js

Lightweight CSS animation library
https://github.com/luwes/morph.js

Last synced: 14 days ago
JSON representation

Lightweight CSS animation library

• Host: GitHub
• URL: https://github.com/luwes/morph.js
• Owner: luwes
• Created: 2014-02-08T10:55:48.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-02-10T06:46:26.000Z (over 10 years ago)
• Last Synced: 2024-10-06T08:42:07.867Z (about 1 month ago)
• Language: JavaScript
• Size: 164 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Morph

A lightweight CSS animation library

##About

The idea was to have a library with a simple api which uses CSS transitions if the browser supports it and fall back to a regular javascript tweening engine.

The `x` and `y` are alias properties which are internally converted to the correct CSS properties depending on which engine is used.

##Example

```html



	Morph('.morphable')

		.duration(300)

		.to({ x: 100, y: 10 })

		.to('opacity', '0.5')

		.start();

```

##API

| Method | Description | 

| ------ | ----------- | 

| duration(n:Number):Morph | Sets the duration in ms |

| get(prop:String):String | Get computed CSS property value |

| set(obj, val=undefined):Morph | Sets one or more CSS property values |

| to(obj, val=undefined):Morph | Animate to one or more CSS property values |

| start():Morph | Start the animation |

| on(event:String, fn:Function):Morph | Add event listener |

| off(event:String, fn:Function):Morph | Remove event listener |

##Events

| Event | Description | 

| ------ | ----------- | 

| update | Gets fired while animating |

| end | Triggered when animation ends |