compass-ceaser-easing

by jhardy

Penner equations for css3 transitions

417 Stars 33 Forks Last release: Not found MIT License 35 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Compass Ceaser CSS Easing Transitions

A compass extension based on ceasar css easing animation tool by @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

$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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.