Skip to content

Latest commit

 

History

History
60 lines (45 loc) · 1.75 KB

README.md

File metadata and controls

60 lines (45 loc) · 1.75 KB
Raw

angular-trianglify-animate

Angular Trianglify Animate is tiny (2kb) plugin to add support for animate images SVG to your page.

Dependencies

  • Angular.js (1.2+)

Usage

Setup & Initialise the plugin

Include the trianglify-animate JS after the angular.js

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js" type="text/javascript"></script>
<script src="//machei.github.io/angular-trianglify-animate/trianglify.animate.js" type="text/javascript"></script>

1#Way: The ng-app directive initializes a module 'moduleTrianglifyAnimate' as the main module of an Angular application to your application:

<body ng-app="moduleTrianglifyAnimate">

2#Way: Add the Trianglify Animate module as a dependency to your application module:

angular.module('yourApp', ['moduleTrianglifyAnimate'])

Using the plugin with the attribue of element svg works in a similar way.

Using with element SVG

<svg id="svg_example" ng-trianglify-animate></svg>;

Using with images SVG

<img id="svg_example" src="../image.svg" ng-trianglify-animate />

Options

Default Options

The following are the default options set by the plugin Angular Trianglify Animate:

Option Default Value Type Description
speed 1 number Animation speed
easing 'linear' string Easing animation tool (soon this feature will be added)
vector-x 0 number Vector space X
vector-y 5 number Vector space Y
base-max 0 number soon
base-min 500 number soon
thesa 0.4 number Polar angle (pi)

Todolist

  • add support for easing animation
  • add more effects: shake and more ..

License

Released under the MIT license.