├── .gitignore ├── bower.json ├── package.json ├── LICENSE ├── README.md └── _sass-easing.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass-easing", 3 | "version": "1.1.2", 4 | "homepage": "https://github.com/KingScooty/sass-easing", 5 | "authors": [ 6 | "Scotty Vernon " 7 | ], 8 | "description": "Sass Easing is a collection of useful easing variables for Sass. Great when used with compass or bourbon.", 9 | "main": "_sass-easing.scss", 10 | "keywords": [ 11 | "sass", 12 | "scss", 13 | "css", 14 | "easing", 15 | "animation", 16 | "css3" 17 | ], 18 | "license": "MIT" 19 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awesome-sass-easing", 3 | "main": "_sass-easings.scss", 4 | "version": "1.1.2", 5 | "description": "Some useful variables for easing animations using SASS.", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/kingscooty/sass-easing" 9 | }, 10 | "keywords": [ 11 | "sass", 12 | "easing", 13 | "scss", 14 | "css" 15 | ], 16 | "author": "Scotty Vernon (http://wildflame.co.uk/)", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/kingscooty/sass-easing/issues" 20 | }, 21 | "homepage": "https://github.com/kingscooty/sass-easing" 22 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Scotty Vernon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Awesome Sass Easing Variables 2 | =========== 3 | 4 | # sass-easing 5 | Some useful variables for easing animations using SASS. 6 | I'll add to this file whenever i come across a cool easing pattern. 7 | 8 | ## Install 9 | 10 | ```bash 11 | $ npm install awesome-sass-easing --save 12 | ``` 13 | 14 | or 15 | 16 | ``` 17 | $ bower install sass-easing --save 18 | ``` 19 | 20 | ## Usage 21 | 22 | ```SCSS 23 | @import "../node_modules/awesome-sass-easing/_easings.scss"; 24 | 25 | .element { 26 | transition(top 500ms $easeInCubic); 27 | } 28 | ``` 29 | 30 | ##Easing Functions 31 | 32 | The following easing functions are available: 33 | 34 | - easeInSine 35 | - easeOutSine 36 | - easeInOutSine 37 | 38 | - easeInQuad 39 | - easeOutQuad 40 | - easeInOutQuad 41 | 42 | - easeInCubic 43 | - easeOutCubic 44 | - easeInOutCubic 45 | 46 | - easeInQuart 47 | - easeOutQuart 48 | - easeInOutQuart 49 | 50 | - easeInQuint 51 | - easeOutQuint 52 | - easeInOutQuint 53 | 54 | - easeInExpo 55 | - easeOutExpo 56 | - easeInOutExpo 57 | 58 | - easeInCirc 59 | - easeOutCirc 60 | - easeInOutCirc 61 | 62 | - easeInBack 63 | - easeOutBack 64 | - easeInOutBack 65 | 66 | - easeInOutFast 67 | 68 | ## License 69 | 70 | MIT -------------------------------------------------------------------------------- /_sass-easing.scss: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------------------------------------------------------------- 2 | // 3 | // Author: Scotty Vernon 4 | // www: http://wildflame.co.uk/ 5 | // twitter: http://twitter.com/KingScooty 6 | // dribbble: http://dribbble.com/KingScooty 7 | // 8 | // Licensed under a MIT License 9 | // 10 | // --------------------------------------------------------------------------------------------------------------------- 11 | // Version: 12 | // 1.1 13 | 14 | $easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715); 15 | $easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1); 16 | $easeInOutSine: cubic-bezier(0.39, 0.575, 0.565, 1); 17 | 18 | $easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53); 19 | $easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 20 | $easeInOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94); 21 | 22 | $easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); 23 | $easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1); 24 | $easeInOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1); 25 | 26 | $easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22); 27 | $easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1); 28 | $easeInOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1); 29 | 30 | $easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06); 31 | $easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1); 32 | $easeInOutQuint: cubic-bezier(0.23, 1, 0.32, 1); 33 | 34 | $easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035); 35 | $easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1); 36 | $easeInOutExpo: cubic-bezier(0.19, 1, 0.22, 1); 37 | 38 | $easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335); 39 | $easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1); 40 | $easeInOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1); 41 | 42 | $easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045); 43 | $easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275); 44 | $easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55); 45 | 46 | $easeInOutFast: cubic-bezier(1,0,0,1); 47 | 48 | $authenticMotion: cubic-bezier(.4,0,.2,1); --------------------------------------------------------------------------------