sassy-cubic-bezier 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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: []
|