Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jhardy/compass-ceaser-easing

Penner equations for css3 transitions
https://github.com/jhardy/compass-ceaser-easing

Last synced: about 18 hours ago
JSON representation

Penner equations for css3 transitions

Awesome Lists containing this project

README 

        
Compass Ceaser CSS Easing Transitions

======================================



A compass extension based on [ceasar css easing animation tool](http://matthewlein.com/ceaser/) by [@matthewlein](http://twitter.com/matthewlein)

This extension provides transitions based on the classic Penner equations from Flash and jQuery.



Installation

============



Install gem from the command line:



    gem install ceaser-easing



Adding Ceaser Easing to an existing project:



    # Edit the project configuration file and add:

    require 'ceaser-easing'



    #import ceaser-easing into your sass/scss file

    @import "ceaser-easing"



Create a new project using Ceaser Easing



    compass create project_name -r ceaser-easing -u ceaser-easing



    #import ceaser-easing into your sass/scss file

    @import "ceaser-easing"



Using Ceaser Easing

===================



The ceaser easing extension provides a sass function called ceaser. You use the function as a value for a transition or animation timing-function property. You pass what type of easing you would like to the function and it will apply the correct cubic-bezier transition timing function for you.



The ceaser easing function

-----------------------



    #transition {

      transition-property: all;

      transition-duration: 1.2s;

      transition-timing-function: ceaser($ease-in);

    }



    #transition-shorthand {

      transition: all 1.2s ceaser($ease-in);

    }



    #animation {

      animation-name: animateMe;

      animation-iteration-count: infinite;

      animation-duration: 10s;

      animation-timing-function: ceaser($easeInSine);

    }



    #animation-shorthand {

      animation: animateMe 10s ceaser($easeInSine) infinite



    }



Ease Types

----------

Here is a list of all the available easing types to choose from, you can see an example of each on the original [demo page](http://matthewlein.com/ceaser/)



    $linear

    $ease (default)

    $ease-in

    $ease-out

    $ease-in-out



    $easeInQuad

    $easeInCubic

    $easeInQuart

    $easeInQuint

    $easeInSine

    $easeInExpo

    $easeInCirc

    $easeInBack



    $easeOutQuad

    $easeOutCubic

    $easeOutQuart

    $easeOutQuint

    $easeOutSine

    $easeOutExpo

    $easeOutCirc

    $easeOutBack



    $easeInOutQuad

    $easeInOutCubic

    $easeInOutQuart

    $easeInOutQuint

    $easeInOutSine

    $easeInOutExpo

    $easeInOutCirc

    $easeInOutBack



The ceaser easing mixin

-----------------------



The ceaser easing extension provides a mixin called ceaser. You pass what type of easing you would like to the mixin and it will apply the correct cubic-bezier transition timing function for you. You can then pass the transition property (defaults to all), the transition duration (defaults to 500ms), and the transition delay (defaults to 0).



    # The ceaser easing mixin with its argument descriptions

    @mixin ceaser-transition(transition property, duration, ease type, delay)



    # Example mixin call that will create a 3 second transition with the ease type of ease-in

    @include ceaser-transition(all, 3s, $ease-in)



    # Example mixin call that will create a 500 milliseconds transition on only the width property with a delay of 1 second

    @include ceaser-transition(width, 500ms, $easeInOutExpo, 1s)



As an example, here is how create the above transition for an html element with id of box.



    #box {

        width: 500px;

        @include ceaser-transition(width, 500ms, $easeInOutExpo, 1s);

    }



    #box:hover {

        width: 700px;

    }



Legacy Support

-----------------------

In this new version of ceaser-easing easing types have move to sass variables instead of using strings. Below is a comparison of the old and new syntax:



    .old-syntax {

      transition-property: all;

      transition-duration: 1.2s;

      transition-timing-function: ceaser("ease-in");

    }



    .new-syntax {

      transition-property: all;

      transition-duration: 1.2s;

      transition-timing-function: ceaser($ease-in);

    }



For legacy purpose for this update you can use the old syntax but have to be sure enable legacy support by setting the ceaser-legacy variable to true like this:



    #Legacy Variable

    $ceaser-legacy: true