Skip to content

mpochron/angular-trianglify-animate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published