jsila/animate

Simple PHP wrapper around Animate.css

Animate

A simple PHP wrapper around Animate.css. It generates string of classes based on which animation you specify as a method to a Animate class instance. For all animations please refer to GitHub page for Animate.css., _(*1)

Installation

You can install this package via Composer by including the following in your composer.json:, _(*2)

{
    "require": {
        "jsila/animate": "0.1.0"
    }
}

It depends on php>=5.4 and Animate.css., _(*3)

Laravel 4

If you are using Laravel 4, you can also register the AnimateServiceProvider for easier integration with the framework., _(*4)

To do so, just update the providers array in your app/config/app.php:, _(*5)

    'providers' => array(
        //...
        'JSila\Animate\AnimateServiceProvider'
    ),

AnimateServiceProvider will also add alias for Animate facade., _(*6)

Usage with Laravel

For example, if you want zoomIn animation (for which the output will be animated zoomIn), you will get it like this:, _(*7)

    Animate::zoomIn();

You can also provide options when generating class string for a specific animation. These options are:, _(*8)

$options = [
    'infinite', // boolean
    'duration', // string
    'delay', // string
    'direction', // string
    'iteration-count' // int
];

Please note that last four options are CSS3 animations properties so specify values accordingly., _(*9)

Each option will add another class to the class string. Some classes are already defined in Animate.css, some are generated dinamically and are accessible from URL which points to CSS., _(*10)

For example, if you want zoomIn animation to run infinitely and is delayed for 0.2s, than this code will do the trick:, _(*11)

    Animate::zoomIn(['infinite' => true, 'delay' => '.2s']);

If you use Laravel 4, that url to CSS defaults to /css/animate_custom_classes.css (you can change it, just publish package configurationd)., _(*12)

Usage as a stand-alone

Classes that are dynamically created are stored in session variable classes. You will first need to make an implementation of JSila\Animate\SessionInterface interface which is a dependency to JSila\Animate\Animate class (eg. MySession)., _(*13)

Than you will also have to generate CSS response. JSila\Animate\Animate class provides generateCSS method, which generates CSS string of classes, but this does not act as a response., _(*14)

Stand-alone example:, _(*15)

$animate = new JSila\Animate\Animate(new Acme\Animate\Session\MySession); // this assumes MySession class is saved in Acme/Animate/Session
$animate->zoomIn(['infinite' => true, 'delay' => '.2s']);