Skip to content

jhardy/compass-ceaser-easing

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Penner equations for css3 transitions

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published