sassy-cubic-bezier 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/CHANGELOG.md +13 -0
- data/README.md +106 -0
- data/lib/cubic-bezier.rb +8 -0
- data/stylesheets/_cubic-bezier.scss +84 -0
- metadata +77 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 06b74ecfba2395d083f70055663955d74fe904a0
|
|
4
|
+
data.tar.gz: 76ab99b463cbbdde8750d7b8742258c4a6533f75
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 9da9ea3ab1829d20338c21f77779f7a366076465b36e6f5469dfc948f2b78766bab6c52456fecd74d817b26cd39bab40300b4c9d2615114446514cb8e1597ca3
|
|
7
|
+
data.tar.gz: c3c63c6eba4582ff2dfa7d876f5a484ad617998eb166a28f1f5acfaf348926a39ad173af6c07e12c44a4e84a8a5ad44d5c40adf869c45686981cf6516a5b0693
|
data/CHANGELOG.md
ADDED
data/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# sassy-cubic-bezier [](https://travis-ci.org/danielguillan/sassy-cubic-bezier) [](http://badge.fury.io/bo/sassy-cubic-bezier) [](http://badge.fury.io/rb/sassy-cubic-bezier)
|
|
2
|
+
|
|
3
|
+
A Sass function that extends the CSS cubic-bezier() notation to allow for (predefined) named easing functions.
|
|
4
|
+
|
|
5
|
+
A quick example:
|
|
6
|
+
|
|
7
|
+
````scss
|
|
8
|
+
.default { transition-timing-function: cubic-bezier('easeOutSine'); }
|
|
9
|
+
.custom { transition-timing-function: cubic-bezier('myCustomEasingFunction'); }
|
|
10
|
+
.manual { transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); }
|
|
11
|
+
````
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
### Download
|
|
16
|
+
|
|
17
|
+
Download [_cubic-bezier.scss](/stylesheets/_cubic-bezier.scss) and place it in your Sass directory.
|
|
18
|
+
|
|
19
|
+
### Bower
|
|
20
|
+
|
|
21
|
+
Run the following command:
|
|
22
|
+
|
|
23
|
+
bower install --save-dev sassy-cubic-bezier
|
|
24
|
+
|
|
25
|
+
### Compass
|
|
26
|
+
|
|
27
|
+
1. `gem install sassy`
|
|
28
|
+
2. Add `require 'cubic-bezier'` to your `config.rb`
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
Import it into your main stylesheet:
|
|
33
|
+
|
|
34
|
+
@import 'cubic-bezier';
|
|
35
|
+
|
|
36
|
+
Just use cubic-bezier() as you normally would in your animations and transitions with the added ability to pass named easing functions:
|
|
37
|
+
|
|
38
|
+
````scss
|
|
39
|
+
.my-transition { transition: all 1s cubic-bezier('easeInOutBack'); }
|
|
40
|
+
.my-animation { animation: fade-in 1s cubic-bezier('easeInQuint'); }
|
|
41
|
+
.manual { transition: fade-in 1s cubic-bezier(1, 2, 3, 4); }
|
|
42
|
+
````
|
|
43
|
+
|
|
44
|
+
### Adding functions and updating default ones
|
|
45
|
+
|
|
46
|
+
````scss
|
|
47
|
+
$my-easing-functions: (
|
|
48
|
+
'custom': (1, 2, 3, 4), // add new function
|
|
49
|
+
'easeOutSine': (0.470, 0.000, 0.745, 0.715) // update default function
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
$cubic-bezier-functions: map-merge($cubic-bezier-functions, $my-easing-functions) !global;
|
|
53
|
+
````
|
|
54
|
+
|
|
55
|
+
### Overriding the built-in functions list
|
|
56
|
+
|
|
57
|
+
Completely remove the built-in functions and replace them with your own list:
|
|
58
|
+
|
|
59
|
+
````scss
|
|
60
|
+
$cubic-bezier-functions: (
|
|
61
|
+
'customOne': (1, 2, 3, 4)
|
|
62
|
+
'customTwo': (4, 3, 2, 1)
|
|
63
|
+
) !global;
|
|
64
|
+
````
|
|
65
|
+
|
|
66
|
+
## Built-in easing functions
|
|
67
|
+
|
|
68
|
+
The built-in easing functions are based on Robert Penner's original equations:
|
|
69
|
+
|
|
70
|
+
````scss
|
|
71
|
+
$cubic-bezier-functions: (
|
|
72
|
+
'linear' : (0.250, 0.250, 0.750, 0.750),
|
|
73
|
+
'ease' : (0.250, 0.100, 0.250, 1.000),
|
|
74
|
+
'ease-in' : (0.420, 0.000, 1.000, 1.000),
|
|
75
|
+
'ease-out' : (0.000, 0.000, 0.580, 1.000),
|
|
76
|
+
'ease-in-out' : (0.420, 0.000, 0.580, 1.000),
|
|
77
|
+
|
|
78
|
+
'easeInQuad' : (0.550, 0.085, 0.680, 0.530),
|
|
79
|
+
'easeInCubic' : (0.550, 0.055, 0.675, 0.190),
|
|
80
|
+
'easeInQuart' : (0.895, 0.030, 0.685, 0.220),
|
|
81
|
+
'easeInQuint' : (0.755, 0.050, 0.855, 0.060),
|
|
82
|
+
'easeInSine' : (0.470, 0.000, 0.745, 0.715),
|
|
83
|
+
'easeInExpo' : (0.950, 0.050, 0.795, 0.035),
|
|
84
|
+
'easeInCirc' : (0.600, 0.040, 0.980, 0.335),
|
|
85
|
+
'easeInBack' : (0.600, -0.280, 0.735, 0.045),
|
|
86
|
+
|
|
87
|
+
'easeOutQuad' : (0.250, 0.460, 0.450, 0.940),
|
|
88
|
+
'easeOutCubic' : (0.215, 0.610, 0.355, 1.000),
|
|
89
|
+
'easeOutQuart' : (0.165, 0.840, 0.440, 1.000),
|
|
90
|
+
'easeOutQuint' : (0.230, 1.000, 0.320, 1.000),
|
|
91
|
+
'easeOutSine' : (0.390, 0.575, 0.565, 1.000),
|
|
92
|
+
'easeOutExpo' : (0.190, 1.000, 0.220, 1.000),
|
|
93
|
+
'easeOutCirc' : (0.075, 0.820, 0.165, 1.000),
|
|
94
|
+
'easeOutBack' : (0.175, 0.885, 0.320, 1.275),
|
|
95
|
+
|
|
96
|
+
'easeInOutQuad' : (0.455, 0.030, 0.515, 0.955),
|
|
97
|
+
'easeInOutCubic' : (0.645, 0.045, 0.355, 1.000),
|
|
98
|
+
'easeInOutQuart' : (0.770, 0.000, 0.175, 1.000),
|
|
99
|
+
'easeInOutQuint' : (0.860, 0.000, 0.070, 1.000),
|
|
100
|
+
'easeInOutSine' : (0.445, 0.050, 0.550, 0.950),
|
|
101
|
+
'easeInOutExpo' : (1.000, 0.000, 0.000, 1.000),
|
|
102
|
+
'easeInOutCirc' : (0.785, 0.135, 0.150, 0.860),
|
|
103
|
+
'easeInOutBack' : (0.680, -0.550, 0.265, 1.550),
|
|
104
|
+
|
|
105
|
+
);
|
|
106
|
+
````
|
data/lib/cubic-bezier.rb
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
// -----------------------------------------------------------------------------
|
|
2
|
+
// sassy-cubic-bezier
|
|
3
|
+
// -----------------------------------------------------------------------------
|
|
4
|
+
////
|
|
5
|
+
/// @author Daniel Guillan
|
|
6
|
+
////
|
|
7
|
+
// Table of contents:
|
|
8
|
+
// 1. Default easing functions
|
|
9
|
+
// 2. cubic-bezier function
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
// -----------------------------------------------------------------------------
|
|
13
|
+
// 1. Default easing functions
|
|
14
|
+
// -----------------------------------------------------------------------------
|
|
15
|
+
/// Default cubic bezier functions
|
|
16
|
+
/// @type Map
|
|
17
|
+
/// @author Robert Penner
|
|
18
|
+
|
|
19
|
+
$cubic-bezier-functions: (
|
|
20
|
+
'linear' : (0.250, 0.250, 0.750, 0.750),
|
|
21
|
+
'ease' : (0.250, 0.100, 0.250, 1.000),
|
|
22
|
+
'ease-in' : (0.420, 0.000, 1.000, 1.000),
|
|
23
|
+
'ease-out' : (0.000, 0.000, 0.580, 1.000),
|
|
24
|
+
'ease-in-out' : (0.420, 0.000, 0.580, 1.000),
|
|
25
|
+
|
|
26
|
+
'easeInQuad' : (0.550, 0.085, 0.680, 0.530),
|
|
27
|
+
'easeInCubic' : (0.550, 0.055, 0.675, 0.190),
|
|
28
|
+
'easeInQuart' : (0.895, 0.030, 0.685, 0.220),
|
|
29
|
+
'easeInQuint' : (0.755, 0.050, 0.855, 0.060),
|
|
30
|
+
'easeInSine' : (0.470, 0.000, 0.745, 0.715),
|
|
31
|
+
'easeInExpo' : (0.950, 0.050, 0.795, 0.035),
|
|
32
|
+
'easeInCirc' : (0.600, 0.040, 0.980, 0.335),
|
|
33
|
+
'easeInBack' : (0.600, -0.280, 0.735, 0.045),
|
|
34
|
+
|
|
35
|
+
'easeOutQuad' : (0.250, 0.460, 0.450, 0.940),
|
|
36
|
+
'easeOutCubic' : (0.215, 0.610, 0.355, 1.000),
|
|
37
|
+
'easeOutQuart' : (0.165, 0.840, 0.440, 1.000),
|
|
38
|
+
'easeOutQuint' : (0.230, 1.000, 0.320, 1.000),
|
|
39
|
+
'easeOutSine' : (0.390, 0.575, 0.565, 1.000),
|
|
40
|
+
'easeOutExpo' : (0.190, 1.000, 0.220, 1.000),
|
|
41
|
+
'easeOutCirc' : (0.075, 0.820, 0.165, 1.000),
|
|
42
|
+
'easeOutBack' : (0.175, 0.885, 0.320, 1.275),
|
|
43
|
+
|
|
44
|
+
'easeInOutQuad' : (0.455, 0.030, 0.515, 0.955),
|
|
45
|
+
'easeInOutCubic' : (0.645, 0.045, 0.355, 1.000),
|
|
46
|
+
'easeInOutQuart' : (0.770, 0.000, 0.175, 1.000),
|
|
47
|
+
'easeInOutQuint' : (0.860, 0.000, 0.070, 1.000),
|
|
48
|
+
'easeInOutSine' : (0.445, 0.050, 0.550, 0.950),
|
|
49
|
+
'easeInOutExpo' : (1.000, 0.000, 0.000, 1.000),
|
|
50
|
+
'easeInOutCirc' : (0.785, 0.135, 0.150, 0.860),
|
|
51
|
+
'easeInOutBack' : (0.680, -0.550, 0.265, 1.550),
|
|
52
|
+
|
|
53
|
+
) !default;
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
// -----------------------------------------------------------------------------
|
|
57
|
+
// 2. cubic-bezier function
|
|
58
|
+
// -----------------------------------------------------------------------------
|
|
59
|
+
/// Retrieve a cubic-bezier function by name or return the custom value.
|
|
60
|
+
/// @param {Arglist} $value - List of values or cubic-bezier function name
|
|
61
|
+
/// @return {Map} cubic-bezier function values
|
|
62
|
+
/// @example scss - Cubic Bezier function
|
|
63
|
+
/// cubic-bezier('easeInOutBack')
|
|
64
|
+
/// // cubic-bezier(0.680, -0.550, 0.265, 1.550)
|
|
65
|
+
|
|
66
|
+
@function cubic-bezier($value...) {
|
|
67
|
+
|
|
68
|
+
@if length($value) == 1 and type-of(nth($value, 1)) == 'string' {
|
|
69
|
+
|
|
70
|
+
// Store the function name passed in `$value...`
|
|
71
|
+
$cubic-bezier-function-name: nth($value, 1);
|
|
72
|
+
|
|
73
|
+
// Get the values for the passed function name
|
|
74
|
+
$value: map-get($cubic-bezier-functions, $cubic-bezier-function-name);
|
|
75
|
+
|
|
76
|
+
// Throw an error if function name is not defined in the
|
|
77
|
+
// `$cubic-bezier-functions` lists
|
|
78
|
+
@if not map-has-key($cubic-bezier-functions, $cubic-bezier-function-name) {
|
|
79
|
+
@error '[cubic-bezier]: `#{$cubic-bezier-function-name}` is not a valid cubic-bezier function name';
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@return unquote('cubic-bezier(#{$value})');
|
|
84
|
+
}
|
metadata
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: sassy-cubic-bezier
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.3.0
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Daniel Guillan
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2015-06-22 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: sass
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - "~>"
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '3.4'
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - "~>"
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '3.4'
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: compass
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - "~>"
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '1.0'
|
|
34
|
+
type: :runtime
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - "~>"
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '1.0'
|
|
41
|
+
description: A Sass function that extends the CSS cubic-bezier() notation to allow
|
|
42
|
+
for (predefined) named easing functions
|
|
43
|
+
email:
|
|
44
|
+
- daniel.guillan@gmail.com
|
|
45
|
+
executables: []
|
|
46
|
+
extensions: []
|
|
47
|
+
extra_rdoc_files: []
|
|
48
|
+
files:
|
|
49
|
+
- CHANGELOG.md
|
|
50
|
+
- README.md
|
|
51
|
+
- lib/cubic-bezier.rb
|
|
52
|
+
- stylesheets/_cubic-bezier.scss
|
|
53
|
+
homepage: https://github.com/danielguillan/sassy-cubic-bezier
|
|
54
|
+
licenses:
|
|
55
|
+
- MIT
|
|
56
|
+
metadata: {}
|
|
57
|
+
post_install_message:
|
|
58
|
+
rdoc_options: []
|
|
59
|
+
require_paths:
|
|
60
|
+
- lib
|
|
61
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
62
|
+
requirements:
|
|
63
|
+
- - ">="
|
|
64
|
+
- !ruby/object:Gem::Version
|
|
65
|
+
version: '0'
|
|
66
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
67
|
+
requirements:
|
|
68
|
+
- - ">="
|
|
69
|
+
- !ruby/object:Gem::Version
|
|
70
|
+
version: 1.3.6
|
|
71
|
+
requirements: []
|
|
72
|
+
rubyforge_project: sassy-cubic-bezier
|
|
73
|
+
rubygems_version: 2.2.2
|
|
74
|
+
signing_key:
|
|
75
|
+
specification_version: 4
|
|
76
|
+
summary: ''
|
|
77
|
+
test_files: []
|