ceaser-easing 0.4 → 0.6
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/{README.mkdn → README.md} +62 -45
- data/Rakefile +2 -0
- data/ceaser-easing.gemspec +18 -0
- data/lib/ceaser-easing/version.rb +3 -0
- data/stylesheets/ceaser-easing/_ceaser.sass +14 -7
- data/stylesheets/ceaser-easing/_ease-types.sass +0 -2
- data/stylesheets/ceaser-easing/_easing-vars.sass +32 -0
- data/templates/project/_ceaser.sass +35 -35
- metadata +22 -11
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 Jared Hardy
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/{README.mkdn → README.md}
RENAMED
@@ -10,22 +10,19 @@ Installation
|
|
10
10
|
|
11
11
|
Install gem from the command line:
|
12
12
|
|
13
|
-
|
13
|
+
gem install ceaser-easing
|
14
14
|
|
15
|
-
Adding Ceaser Easing to an
|
15
|
+
Adding Ceaser Easing to an existing project:
|
16
16
|
|
17
17
|
# Edit the project configuration file and add:
|
18
18
|
require 'ceaser-easing'
|
19
19
|
|
20
|
-
# From the command line:
|
21
|
-
compass install ceaser-easing
|
22
|
-
|
23
20
|
#import ceaser-easing into your sass/scss file
|
24
21
|
@import "ceaser-easing"
|
25
22
|
|
26
23
|
Create a new project using Ceaser Easing
|
27
24
|
|
28
|
-
compass create project_name -r ceaser-easing
|
25
|
+
compass create project_name -r ceaser-easing -u ceaser-easing
|
29
26
|
|
30
27
|
#import ceaser-easing into your sass/scss file
|
31
28
|
@import "ceaser-easing"
|
@@ -46,11 +43,11 @@ The ceaser easing function
|
|
46
43
|
#transition {
|
47
44
|
transition-property: all;
|
48
45
|
transition-duration: 1.2s;
|
49
|
-
transition-timing-function: ceaser(
|
46
|
+
transition-timing-function: ceaser($ease-in);
|
50
47
|
}
|
51
48
|
|
52
49
|
#transition-shorthand {
|
53
|
-
transition: all 1.2s ceaser(
|
50
|
+
transition: all 1.2s ceaser($ease-in);
|
54
51
|
}
|
55
52
|
|
56
53
|
|
@@ -58,11 +55,11 @@ The ceaser easing function
|
|
58
55
|
animation-name: animateMe;
|
59
56
|
animation-iteration-count: infinite;
|
60
57
|
animation-duration: 10s;
|
61
|
-
animation-timing-function: ceaser(
|
58
|
+
animation-timing-function: ceaser($easeInSine);
|
62
59
|
}
|
63
60
|
|
64
61
|
#animation-shorthand {
|
65
|
-
animation: animateMe 10s ceaser(
|
62
|
+
animation: animateMe 10s ceaser($easeInSine) infinite
|
66
63
|
|
67
64
|
}
|
68
65
|
|
@@ -71,38 +68,38 @@ Ease Types
|
|
71
68
|
----------
|
72
69
|
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/)
|
73
70
|
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
71
|
+
$linear
|
72
|
+
$ease (default)
|
73
|
+
$ease-in
|
74
|
+
$ease-out
|
75
|
+
$ease-in-out
|
76
|
+
|
77
|
+
$easeInQuad
|
78
|
+
$easeInCubic
|
79
|
+
$easeInQuart
|
80
|
+
$easeInQuint
|
81
|
+
$easeInSine
|
82
|
+
$easeInExpo
|
83
|
+
$easeInCirc
|
84
|
+
$easeInBack
|
85
|
+
|
86
|
+
$easeOutQuad
|
87
|
+
$easeOutCubic
|
88
|
+
$easeOutQuart
|
89
|
+
$easeOutQuint
|
90
|
+
$easeOutSine
|
91
|
+
$easeOutExpo
|
92
|
+
$easeOutCirc
|
93
|
+
$easeOutBack
|
94
|
+
|
95
|
+
$easeInOutQuad
|
96
|
+
$easeInOutCubic
|
97
|
+
$easeInOutQuart
|
98
|
+
$easeInOutQuint
|
99
|
+
$easeInOutSine
|
100
|
+
$easeInOutExpo
|
101
|
+
$easeInOutCirc
|
102
|
+
easeInOutBack
|
106
103
|
|
107
104
|
|
108
105
|
|
@@ -115,22 +112,42 @@ The ceaser easing extension provides a mixin called ceaser. You pass what type o
|
|
115
112
|
@mixin ceaser-transition(ease type, transition property, duration, delay)
|
116
113
|
|
117
114
|
# Example mixin call that will create a 3 second transition with the ease type of ease-in
|
118
|
-
@include ceaser-transition(ease-in, all, 3s)
|
115
|
+
@include ceaser-transition($ease-in, all, 3s)
|
119
116
|
|
120
117
|
# Example mixin call that will create a 500 milliseconds transition on only the width property with a delay of 1 second
|
121
|
-
@include ceaser-transition(easeInOutExpo, width, 500ms, 1s)
|
118
|
+
@include ceaser-transition($easeInOutExpo, width, 500ms, 1s)
|
122
119
|
|
123
120
|
|
124
121
|
As an example, here is how create the above transition for an html element with id of box.
|
125
122
|
|
126
123
|
#box {
|
127
124
|
width: 500px;
|
128
|
-
@include ceaser-transition(easeInOutExpo, width, 500ms, 1s);
|
125
|
+
@include ceaser-transition($easeInOutExpo, width, 500ms, 1s);
|
129
126
|
}
|
130
127
|
|
131
128
|
#box:hover {
|
132
129
|
width: 700px;
|
133
130
|
}
|
134
131
|
|
132
|
+
Legacy Support
|
133
|
+
-----------------------
|
134
|
+
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:
|
135
|
+
|
136
|
+
.old-syntax {
|
137
|
+
transition-property: all;
|
138
|
+
transition-duration: 1.2s;
|
139
|
+
transition-timing-function: ceaser("ease-in");
|
140
|
+
}
|
141
|
+
|
142
|
+
.new-syntax {
|
143
|
+
transition-property: all;
|
144
|
+
transition-duration: 1.2s;
|
145
|
+
transition-timing-function: ceaser($ease-in);
|
146
|
+
}
|
147
|
+
|
148
|
+
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:
|
149
|
+
|
150
|
+
#Legacy Variable
|
151
|
+
$ceaser-legacy: true
|
135
152
|
|
136
153
|
|
data/Rakefile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
require File.expand_path('../lib/ceaser-easing/version', __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |gem|
|
5
|
+
gem.authors = ["Jared Hardy"]
|
6
|
+
gem.email = ["jared@jaredhardy.com"]
|
7
|
+
gem.description = %q{a css transition implementation of the Penner equations based on @matthewlein css conversions for compass}
|
8
|
+
gem.summary = %q{a css transition implementation of the Penner equations based on @matthewlein css conversions for compass}
|
9
|
+
gem.homepage = "https://github.com/jhardy/compass-ceaser-easing"
|
10
|
+
|
11
|
+
gem.files = `git ls-files`.split($\)
|
12
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
13
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
14
|
+
gem.name = "ceaser-easing"
|
15
|
+
gem.require_paths = ["lib"]
|
16
|
+
gem.version = CeaserEasing::VERSION
|
17
|
+
gem.add_dependency("compass", [">= 0.12.2"])
|
18
|
+
end
|
@@ -1,13 +1,20 @@
|
|
1
1
|
@import "compass/css3/transition"
|
2
2
|
@import "ease-types"
|
3
|
+
@import "easing-vars"
|
3
4
|
|
4
|
-
|
5
|
-
$easingValue: returnEaseType($type)
|
6
|
-
@return cubic-bezier(unquote($easingValue))
|
5
|
+
$ceaser-legacy: false !default
|
7
6
|
|
7
|
+
@function ceaser($type: $ease)
|
8
|
+
@if $legacy
|
9
|
+
$easingValue: returnEaseType($type)
|
10
|
+
@return cubic-bezier(unquote($easingValue))
|
11
|
+
@else
|
12
|
+
@return cubic-bezier(unquote($type))
|
8
13
|
|
9
|
-
|
10
|
-
@
|
11
|
-
|
12
|
-
|
14
|
+
@mixin ceaser-transition($type: $ease, $properties: all, $duration: 500ms, $delay: 0ms)
|
15
|
+
@if $legacy
|
16
|
+
$easingValue : returnEaseType($type)
|
17
|
+
@include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay)
|
18
|
+
@else
|
19
|
+
@include transition($properties $duration cubic-bezier(unquote($type)) $delay)
|
13
20
|
|
@@ -29,7 +29,6 @@
|
|
29
29
|
$easingValue: "0.600, -0.280, 0.735, 0.045"
|
30
30
|
|
31
31
|
|
32
|
-
|
33
32
|
@else if $type == "easeOutQuad"
|
34
33
|
$easingValue: "0.250, 0.460, 0.450, 0.940"
|
35
34
|
@else if $type == "easeOutCubic"
|
@@ -48,7 +47,6 @@
|
|
48
47
|
$easingValue: "0.175, 0.885, 0.320, 1.275"
|
49
48
|
|
50
49
|
|
51
|
-
|
52
50
|
@else if $type == "easeInOutQuad"
|
53
51
|
$easingValue: "0.455, 0.030, 0.515, 0.955"
|
54
52
|
@else if $type == "easeInOutCubic"
|
@@ -0,0 +1,32 @@
|
|
1
|
+
$linear : "0.250, 0.250, 0.750, 0.750" !default
|
2
|
+
$ease : "0.250, 0.100, 0.250, 1.000"
|
3
|
+
$ease-in : "0.420, 0.000, 1.000, 1.000" !default
|
4
|
+
$ease-out : "0.000, 0.000, 0.580, 1.000" !default
|
5
|
+
$ease-in-out : "0.420, 0.000, 0.580, 1.000" !default
|
6
|
+
|
7
|
+
$easeInQuad : "0.550, 0.085, 0.680, 0.530" !default
|
8
|
+
$easeInCubic : "0.550, 0.055, 0.675, 0.190" !default
|
9
|
+
$easeInQuart : "0.895, 0.030, 0.685, 0.220" !default
|
10
|
+
$easeInQuint : "0.755, 0.050, 0.855, 0.060" !default
|
11
|
+
$easeInSine : "0.470, 0.000, 0.745, 0.715" !default
|
12
|
+
$easeInExpo : "0.950, 0.050, 0.795, 0.035" !default
|
13
|
+
$easeInCirc : "0.600, 0.040, 0.980, 0.335" !default
|
14
|
+
$easeInBack : "0.600, -0.280, 0.735, 0.045" !default
|
15
|
+
|
16
|
+
$easeOutQuad : "0.250, 0.460, 0.450, 0.940" !default
|
17
|
+
$easeOutCubic : "0.215, 0.610, 0.355, 1.000" !default
|
18
|
+
$easeOutQuart : "0.165, 0.840, 0.440, 1.000" !default
|
19
|
+
$easeOutQuint : "0.230, 1.000, 0.320, 1.000" !default
|
20
|
+
$easeOutSine : "0.390, 0.575, 0.565, 1.000" !default
|
21
|
+
$easeOutExpo : "0.190, 1.000, 0.220, 1.000" !default
|
22
|
+
$easeOutCirc : "0.075, 0.820, 0.165, 1.000" !default
|
23
|
+
$easeOutBack : "0.175, 0.885, 0.320, 1.275" !default
|
24
|
+
|
25
|
+
$easeInOutQuad : "0.455, 0.030, 0.515, 0.955" !default
|
26
|
+
$easeInOutCubic : "0.645, 0.045, 0.355, 1.000" !default
|
27
|
+
$easeInOutQuart : "0.770, 0.000, 0.175, 1.000" !default
|
28
|
+
$easeInOutQuint : "0.860, 0.000, 0.070, 1.000" !default
|
29
|
+
$easeInOutSine : "0.445, 0.050, 0.550, 0.950" !default
|
30
|
+
$easeInOutExpo : "1.000, 0.000, 0.000, 1.000" !default
|
31
|
+
$easeInOutCirc : "0.785, 0.135, 0.150, 0.860" !default
|
32
|
+
$easeInOutBack : "0.680, -0.550, 0.265, 1.550" !default
|
@@ -5,13 +5,13 @@
|
|
5
5
|
#transition
|
6
6
|
-webkit-transition-property: all
|
7
7
|
-webkit-transition-duration: 1.2s
|
8
|
-
-webkit-transition-timing-function: ceaser(
|
8
|
+
-webkit-transition-timing-function: ceaser($ease-in)
|
9
9
|
|
10
10
|
|
11
11
|
#animation
|
12
12
|
-webkit-animation-name: animateMe
|
13
13
|
-webkit-animation-iteration-count: infinite
|
14
|
-
-webkit-animation-timing-function: ceaser(
|
14
|
+
-webkit-animation-timing-function: ceaser($easeInSine)
|
15
15
|
-webkit-animation-duration: 10s
|
16
16
|
|
17
17
|
|
@@ -22,7 +22,7 @@
|
|
22
22
|
// here is how to create that transition for an html element with id of box.
|
23
23
|
|
24
24
|
#ceaser-transition
|
25
|
-
@include ceaser-transition(
|
25
|
+
@include ceaser-transition($easeInOutExpo, width, 500ms, 1s)
|
26
26
|
|
27
27
|
|
28
28
|
|
@@ -30,36 +30,36 @@
|
|
30
30
|
|
31
31
|
List of all timing function
|
32
32
|
|
33
|
-
* linear
|
34
|
-
* ease (default)
|
35
|
-
* ease-in
|
36
|
-
* ease-out
|
37
|
-
* ease-in-out
|
38
|
-
|
39
|
-
* easeInQuad
|
40
|
-
* easeInCubic
|
41
|
-
* easeInQuart
|
42
|
-
* easeInQuint
|
43
|
-
* easeInSine
|
44
|
-
* easeInExpo
|
45
|
-
* easeInCirc
|
46
|
-
* easeInBack
|
47
|
-
|
48
|
-
* easeOutQuad
|
49
|
-
* easeOutCubic
|
50
|
-
* easeOutQuart
|
51
|
-
* easeOutQuint
|
52
|
-
* easeOutSine
|
53
|
-
* easeOutExpo
|
54
|
-
* easeOutCirc
|
55
|
-
* easeOutBack
|
56
|
-
|
57
|
-
* easeInOutQuad
|
58
|
-
* easeInOutCubic
|
59
|
-
* easeInOutQuart
|
60
|
-
* easeInOutQuint
|
61
|
-
* easeInOutSine
|
62
|
-
* easeInOutExpo
|
63
|
-
* easeInOutCirc
|
64
|
-
* easeInOutBack
|
33
|
+
* $linear
|
34
|
+
* $ease (default)
|
35
|
+
* $ease-in
|
36
|
+
* $ease-out
|
37
|
+
* $ease-in-out
|
38
|
+
|
39
|
+
* $easeInQuad
|
40
|
+
* $easeInCubic
|
41
|
+
* $easeInQuart
|
42
|
+
* $easeInQuint
|
43
|
+
* $easeInSine
|
44
|
+
* $easeInExpo
|
45
|
+
* $easeInCirc
|
46
|
+
* $easeInBack
|
47
|
+
|
48
|
+
* $easeOutQuad
|
49
|
+
* $easeOutCubic
|
50
|
+
* $easeOutQuart
|
51
|
+
* $easeOutQuint
|
52
|
+
* $easeOutSine
|
53
|
+
* $easeOutExpo
|
54
|
+
* $easeOutCirc
|
55
|
+
* $easeOutBack
|
56
|
+
|
57
|
+
* $easeInOutQuad
|
58
|
+
* $easeInOutCubic
|
59
|
+
* $easeInOutQuart
|
60
|
+
* $easeInOutQuint
|
61
|
+
* $easeInOutSine
|
62
|
+
* $easeInOutExpo
|
63
|
+
* $easeInOutCirc
|
64
|
+
* $easeInOutBack
|
65
65
|
======================== */
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ceaser-easing
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: '0.
|
4
|
+
version: '0.6'
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,37 +9,48 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
13
|
-
default_executable:
|
12
|
+
date: 2013-01-08 00:00:00.000000000Z
|
14
13
|
dependencies:
|
15
14
|
- !ruby/object:Gem::Dependency
|
16
15
|
name: compass
|
17
|
-
requirement:
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
18
17
|
none: false
|
19
18
|
requirements:
|
20
19
|
- - ! '>='
|
21
20
|
- !ruby/object:Gem::Version
|
22
|
-
version:
|
21
|
+
version: 0.12.2
|
23
22
|
type: :runtime
|
24
23
|
prerelease: false
|
25
|
-
version_requirements:
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 0.12.2
|
26
30
|
description: a css transition implementation of the Penner equations based on @matthewlein
|
27
31
|
css conversions for compass
|
28
|
-
email:
|
32
|
+
email:
|
33
|
+
- jared@jaredhardy.com
|
29
34
|
executables: []
|
30
35
|
extensions: []
|
31
36
|
extra_rdoc_files: []
|
32
37
|
files:
|
33
|
-
-
|
38
|
+
- .gitignore
|
39
|
+
- Gemfile
|
40
|
+
- LICENSE
|
41
|
+
- README.md
|
42
|
+
- Rakefile
|
43
|
+
- ceaser-easing.gemspec
|
34
44
|
- lib/ceaser-easing.rb
|
45
|
+
- lib/ceaser-easing/version.rb
|
35
46
|
- stylesheets/_ceaser-easing.sass
|
36
47
|
- stylesheets/ceaser-easing/_ceaser.sass
|
37
48
|
- stylesheets/ceaser-easing/_ease-types.sass
|
38
49
|
- stylesheets/ceaser-easing/_easing-functions.sass
|
50
|
+
- stylesheets/ceaser-easing/_easing-vars.sass
|
39
51
|
- templates/project/_ceaser.sass
|
40
52
|
- templates/project/manifest.rb
|
41
|
-
|
42
|
-
homepage: http://www.jaredhardy.com/
|
53
|
+
homepage: https://github.com/jhardy/compass-ceaser-easing
|
43
54
|
licenses: []
|
44
55
|
post_install_message:
|
45
56
|
rdoc_options: []
|
@@ -59,7 +70,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
59
70
|
version: '0'
|
60
71
|
requirements: []
|
61
72
|
rubyforge_project:
|
62
|
-
rubygems_version: 1.
|
73
|
+
rubygems_version: 1.8.19
|
63
74
|
signing_key:
|
64
75
|
specification_version: 3
|
65
76
|
summary: a css transition implementation of the Penner equations based on @matthewlein
|