├── .babelrc ├── .editorconfig ├── .github ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── browserstack-logo-182x96.png ├── .gitignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── V2_CHANGES.md ├── babel.config.js ├── bower.json ├── docs.ts ├── gsap ├── GreenSock Animation Platform (GSAP) Speed Test.html ├── GreenSock Animation Platform (GSAP) Speed Test_files │ ├── CSSPlugin.js.download │ ├── CSSPlugin.min.js.download │ ├── Ease.js.download │ ├── TweenLite.min.js.download │ ├── anime.min.js.download │ ├── css │ ├── dojo.js.download │ ├── easeljs-0.4.2.min.js.download │ ├── easing.js.download │ ├── jquery-3.0.0.min.js.download │ ├── jquery.gsap.min.js.download │ ├── mootools-core-1.4.5-full-compat-yc.js.download │ ├── tweenjs-0.2.0.min.js.download │ ├── web-animations-basic.min.js.download │ └── zepto.min.js.download └── img │ └── dot.png ├── legacy ├── README.md ├── blur.ts ├── borderColor.ts ├── clip.ts ├── normalisations.ts └── opacity.ts ├── package-lock.json ├── package.json ├── rollup.config.js ├── src-ui ├── attention_seekers │ ├── _all.ts │ ├── bounce.ts │ ├── flash.ts │ ├── headShake.ts │ ├── jello.ts │ ├── pulse.ts │ ├── rubberBand.ts │ ├── shake.ts │ ├── swing.ts │ ├── tada.ts │ └── wobble.ts ├── bouncing_entrances │ ├── _all.ts │ ├── bounceIn.ts │ ├── bounceInDown.ts │ ├── bounceInLeft.ts │ ├── bounceInRight.ts │ └── bounceInUp.ts ├── bouncing_exits │ ├── _all.ts │ ├── bounceOut.ts │ ├── bounceOutDown.ts │ ├── bounceOutLeft.ts │ ├── bounceOutRight.ts │ └── bounceOutUp.ts ├── fading_entrances │ ├── _all.ts │ ├── fadeIn.ts │ ├── fadeInDown.ts │ ├── fadeInDownBig.ts │ ├── fadeInLeft.ts │ ├── fadeInLeftBig.ts │ ├── fadeInRight.ts │ ├── fadeInRightBig.ts │ ├── fadeInUp.ts │ └── fadeInUpBig.ts ├── fading_exits │ ├── _all.ts │ ├── fadeOut.ts │ ├── fadeOutDown.ts │ ├── fadeOutDownBig.ts │ ├── fadeOutLeft.ts │ ├── fadeOutLeftBig.ts │ ├── fadeOutRight.ts │ ├── fadeOutRightBig.ts │ ├── fadeOutUp.ts │ └── fadeOutUpBig.ts ├── flippers │ ├── _all.ts │ ├── flip.ts │ ├── flipInX.ts │ ├── flipInY.ts │ ├── flipOutX.ts │ └── flipOutY.ts ├── lightspeed │ ├── _all.ts │ ├── lightSpeedIn.ts │ └── lightSpeedOut.ts ├── rotating_entrances │ ├── _all.ts │ ├── rotateIn.ts │ ├── rotateInDownLeft.ts │ ├── rotateInDownRight.ts │ ├── rotateInUpLeft.ts │ └── rotateInUpRight.ts ├── rotating_exits │ ├── _all.ts │ ├── rotateOut.ts │ ├── rotateOutDownLeft.ts │ ├── rotateOutDownRight.ts │ ├── rotateOutUpLeft.ts │ └── rotateOutUpRight.ts ├── sliding_entrances │ ├── _all.ts │ ├── slideInDown.ts │ ├── slideInLeft.ts │ ├── slideInRight.ts │ └── slideInUp.ts ├── sliding_exits │ ├── _all.ts │ ├── slideOutDown.ts │ ├── slideOutLeft.ts │ ├── slideOutRight.ts │ └── slideOutUp.ts ├── specials │ ├── _all.ts │ ├── hinge.ts │ ├── jackInTheBox.ts │ ├── rollIn.ts │ └── rollOut.ts ├── tsconfig.json ├── velocity.ui.ts ├── zooming_entrances │ ├── _all.ts │ ├── zoomIn.ts │ ├── zoomInDown.ts │ ├── zoomInLeft.ts │ ├── zoomInRight.ts │ └── zoomInUp.ts └── zooming_exits │ ├── _all.ts │ ├── zoomOut.ts │ ├── zoomOutDown.ts │ ├── zoomOutLeft.ts │ ├── zoomOutRight.ts │ └── zoomOutUp.ts ├── src ├── Velocity │ ├── _all.ts │ ├── actions │ │ ├── _all.ts │ │ ├── actions.ts │ │ ├── finish.ts │ │ ├── index.ts │ │ ├── option.ts │ │ ├── pauseResume.ts │ │ ├── property.ts │ │ ├── reverse.ts │ │ ├── stop.ts │ │ ├── style.ts │ │ └── tween.ts │ ├── camelCase.ts │ ├── complete.ts │ ├── css │ │ ├── _all.ts │ │ ├── augmentDimension.ts │ │ ├── colors.ts │ │ ├── fixColors.ts │ │ ├── getPropertyValue.ts │ │ ├── index.ts │ │ ├── removeNestedCalc.ts │ │ └── setPropertyValue.ts │ ├── data.ts │ ├── defaults.ts │ ├── easing │ │ ├── _all.ts │ │ ├── back.ts │ │ ├── bezier.ts │ │ ├── bounce.ts │ │ ├── easings.ts │ │ ├── elastic.ts │ │ ├── index.ts │ │ ├── spring_rk4.ts │ │ ├── step.ts │ │ └── string.ts │ ├── index.ts │ ├── normalizations │ │ ├── _all.ts │ │ ├── dimensions.ts │ │ ├── display.ts │ │ ├── index.ts │ │ ├── normalizations.ts │ │ ├── normalizationsObject.ts │ │ ├── scroll.ts │ │ ├── style.ts │ │ ├── svg │ │ │ ├── _all.ts │ │ │ ├── attributes.ts │ │ │ ├── dimensions.ts │ │ │ └── index.ts │ │ └── tween.ts │ ├── options.ts │ ├── patch.ts │ ├── queue.ts │ ├── sequences.ts │ ├── sequencesObject.ts │ ├── state.ts │ ├── tick.ts │ └── tweens.ts ├── constants.ts ├── fakeClass.js ├── fakeClass.ts ├── tsconfig.json ├── types.ts ├── utility.ts ├── velocity.ts └── velocityFn.ts ├── test ├── index.html ├── jquery-3.2.1.min.js ├── qunit-2.5.0.css ├── qunit-2.5.0.js ├── qunit-assert-close.js ├── src │ ├── 1_Core │ │ ├── Arguments.ts │ │ ├── End Value Caching.ts │ │ ├── End Value Setting.ts │ │ ├── Start Value Calculation.ts │ │ ├── Unit Calculation.ts │ │ └── _module.ts │ ├── 2_Option │ │ ├── Option Begin.ts │ │ ├── Option Complete.ts │ │ ├── Option Delay.ts │ │ ├── Option Duration.ts │ │ ├── Option Easing.ts │ │ ├── Option Fps Limit.ts │ │ ├── Option Loop.ts │ │ ├── Option Progress.ts │ │ ├── Option Queue.ts │ │ ├── Option Repeat.ts │ │ ├── Option Speed.ts │ │ ├── Option Sync.ts │ │ └── _module.ts │ ├── 3_Command │ │ ├── Command Finish.ts │ │ ├── Command Pause + Resume.ts │ │ ├── Command Reverse.ts │ │ ├── Command Scroll.ts │ │ ├── Command Stop.ts │ │ ├── Command Tween.ts │ │ └── _module.ts │ ├── 4_Feature │ │ ├── Feature Classname.ts │ │ ├── Feature Colors.ts │ │ ├── Feature Forcefeeding.ts │ │ ├── Feature Promises.ts │ │ ├── Feature Sequences.ts │ │ ├── Feature Value Functions.ts │ │ └── _module.ts │ ├── 5_UIPack │ │ ├── Packaged Effect slideUp+Down.ts │ │ ├── UI Pack Call Options.ts │ │ ├── UI Pack Callbacks.ts │ │ ├── UI Pack In+Out.ts │ │ ├── UI Pack RegisterEffect.ts │ │ ├── UI Pack RunSequence.ts │ │ └── _module.ts │ ├── 6_Properties │ │ ├── Normalization property value reordering.ts │ │ ├── Property Display.ts │ │ ├── Property Visibility.ts │ │ └── _module.ts │ ├── test.ts │ ├── tsconfig.json │ └── utilities.ts ├── test.js ├── test.js.map └── zepto-1.2.0.min.js ├── tsconfig.json ├── tslint.json ├── velocity.d.ts ├── velocity.es5.js ├── velocity.es5.js.map ├── velocity.js ├── velocity.js.map ├── velocity.min.js ├── velocity.ui.js ├── velocity.ui.js.map ├── velocity.ui.min.js └── version.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }] 6 | ], 7 | "plugins": ["external-helpers"] 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # .editorconfig 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 4 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | #### Your system information 2 | 3 | * VelocityJS version: 4 | * Browser: 5 | * Operating System: 6 | 7 | #### Checklist 8 | 9 | * Is this an issue with *code*?: [Yes/No] 10 | * Is this an issue with *documentation*?: [Yes/No] 11 | * Have you reproduced this in other browsers?: [Yes/No] 12 | * Have you checked for updates?: [Yes/No] 13 | * Have you checked for similar open issues?: [Yes/No] 14 | 15 | > Please remember that this is an issue tracker, support requests should be posted on StackOverflow - see CONTRIBUTING.md 16 | 17 | #### Please describe your issue in as much detail as possible: 18 | Describe what you _expected_ should happen and what _did_ happen. 19 | 20 | #### Steps for reproducing this issue (code): 21 | 22 | 1. 23 | 2. 24 | 3. 25 | 26 | #### JSFiddle example showing issue in action (code): 27 | 28 | > Go to https://jsfiddle.net/Rycochet/mqv9L27u/ - click the "Fork" button at the top, create the example and copy the new URL back here. 29 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | #### Checklist 2 | 3 | * Have you linked to relevant open issues?: [Yes/No] 4 | * I agree for this to be covered by the Velocity [license](https://github.com/julianshapiro/velocity/blob/master/LICENSE.md)?: [Yes/No] 5 | 6 | #### Please describe this Pull Request in as much detail as possible: 7 | Describe what the _old behaviour_ was, and what the _new behaviour_ is. 8 | 9 | #### People who contributed to this change: 10 | -------------------------------------------------------------------------------- /.github/browserstack-logo-182x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/julianshapiro/velocity/767e35cac12120be526eef330e4d988b2c3cfc3c/.github/browserstack-logo-182x96.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.vscode 3 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at rycochet@rycochet.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | **Contributing** 2 | 3 | - Make sure you're using the latest version of Velocity before reporting a bug. 4 | 5 | - If you are asking for help please use [StackOverflow](https://stackoverflow.com/questions/tagged/velocity.js), as the issue tracker is for bugs and suggestions. 6 | 7 | - Unless you're reporting an obvious bug that can be immediately recreated by anyone, please **create a demo** with the minimum amount of code necessary to reproduce your bug. You can use [this template](https://jsfiddle.net/Rycochet/mqv9L27u/), which already has Velocity and jQuery included (jQuery is not required by Velocity, it is included for ease of examples). 8 | 9 | - Pull Requests for fixes and new features are often accepted, but feel free to open an issue first if you're unsure of the reception. All code submitted becomes part of VelocityJS and gets covered by its [license](https://github.com/julianshapiro/velocity/blob/master/LICENSE.md). 10 | 11 | - Please check the [wiki](https://github.com/julianshapiro/velocity/wiki). 12 | 13 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014 Julian Shapiro 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. 22 | -------------------------------------------------------------------------------- /V2_CHANGES.md: -------------------------------------------------------------------------------- 1 | # Major Changes in Velocity V2 2 | 3 | * APIs for extending Velocity - see the various register* commands in the wiki. 4 | * Chaining - Chaining is awesome, use it. Chained commands are designed to operate on the chained animation, not on the elements within it. 5 | * Colors - All web colors are supported internally. 6 | * Delay - You can pass a negative number to start inside the animation rather than just having a delay before it. 7 | * Display - This is a property, no longer an option. 8 | * Loop - This no longer copies the animation call, it calls it multiple times. 9 | * Per-element - Animations are now copied per-element, and not one a one-animation-per-array basis as in other libraries (and old Velocity v1). 10 | * Repeat - This is almost identical to loop, but only runs one way. 11 | * RequireJS - The namespace is now "velocity-animate" for consistency with the NPMjs project name. 12 | * Reverse - Now reverses the last animation at time of adding, not when playing. 13 | * Scroll - It is now a property, though it's preferred to use scrollTop and scrollLeft. (Working, but not happy with internal code - the API will not change again.) 14 | * Sequences - rewritten and completely incompatible with previous versions. 15 | * Speed - You can control the speed of the animation playback. 16 | * Styles - Use `element.velocity("style", "propertyName"[, value])`, the old .Hook has gone. 17 | * SVG - All SVG attributes are supported internally, though they must be placed on the correct type of element. 18 | * Sync - You can now de-sync animations so they start immediately per-element, rather than waiting for all to be ready. 19 | * Transforms - Use these directly within CSS, don't try the old shortcuts as they don't exist. 20 | * UI-Pack - Now only contains animations, all code is in the core Velocity now. 21 | * Visibility - This is a property, no longer an option. 22 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Babel config. 7 | */ 8 | 9 | module.exports = { 10 | "presets": [ 11 | [ 12 | "@babel/preset-env", 13 | { 14 | "modules": false 15 | } 16 | ], 17 | "@babel/preset-typescript" 18 | ], 19 | "plugins": [ 20 | [ 21 | "@babel/plugin-proposal-optional-chaining", 22 | { 23 | "loose": true 24 | } 25 | ], 26 | "@babel/plugin-external-helpers" 27 | ] 28 | }; 29 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "velocity", 3 | "homepage": "http://velocityjs.org", 4 | "authors": [ 5 | { "name" : "Julian Shapiro", 6 | "homepage" : "http://julian.com/" 7 | }, 8 | { 9 | "name": "Ryc O'Chet", 10 | "url": "https://github.com/Rycochet" 11 | } 12 | ], 13 | "description": "Accelerated JavaScript animation.", 14 | "main": [ "./velocity.js", "./velocity.ui.js"], 15 | "keywords": [ 16 | "animation", 17 | "jquery", 18 | "animate", 19 | "lightweight", 20 | "smooth", 21 | "ui", 22 | "velocity.js", 23 | "velocityjs", 24 | "javascript" 25 | ], 26 | "license": "MIT", 27 | "ignore": [ 28 | "*.json", 29 | "!/bower.json", 30 | "LICENSE", 31 | "*.md" 32 | ], 33 | "repository" : 34 | { 35 | "type" : "git", 36 | "url" : "http://github.com/julianshapiro/velocity.git" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /docs.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | -------------------------------------------------------------------------------- /gsap/GreenSock Animation Platform (GSAP) Speed Test_files/css: -------------------------------------------------------------------------------- 1 | /* latin-ext */ 2 | @font-face { 3 | font-family: 'Signika Negative'; 4 | font-style: normal; 5 | font-weight: 300; 6 | src: local('Signika Negative Light'), local('SignikaNegative-Light'), url(https://fonts.gstatic.com/s/signikanegative/v6/q5TOjIw4CenPw6C-TW06FlQm6jw9jd4_TLOgXPl3aMI.woff2) format('woff2'); 7 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 8 | } 9 | /* latin */ 10 | @font-face { 11 | font-family: 'Signika Negative'; 12 | font-style: normal; 13 | font-weight: 300; 14 | src: local('Signika Negative Light'), local('SignikaNegative-Light'), url(https://fonts.gstatic.com/s/signikanegative/v6/q5TOjIw4CenPw6C-TW06FpYOZfD05paxOum1Eorz4ao.woff2) format('woff2'); 15 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 16 | } 17 | /* latin-ext */ 18 | @font-face { 19 | font-family: 'Signika Negative'; 20 | font-style: normal; 21 | font-weight: 400; 22 | src: local('Signika Negative Regular'), local('SignikaNegative-Regular'), url(https://fonts.gstatic.com/s/signikanegative/v6/Z-Q1hzbY8uAo3TpTyPFMXcRUv4UNzckW6WBp2csADjc.woff2) format('woff2'); 23 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 24 | } 25 | /* latin */ 26 | @font-face { 27 | font-family: 'Signika Negative'; 28 | font-style: normal; 29 | font-weight: 400; 30 | src: local('Signika Negative Regular'), local('SignikaNegative-Regular'), url(https://fonts.gstatic.com/s/signikanegative/v6/Z-Q1hzbY8uAo3TpTyPFMXeDvvFXM8xWgng_3Cf56FV0.woff2) format('woff2'); 31 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 32 | } 33 | /* latin-ext */ 34 | @font-face { 35 | font-family: 'Signika Negative'; 36 | font-style: normal; 37 | font-weight: 700; 38 | src: local('Signika Negative Bold'), local('SignikaNegative-Bold'), url(https://fonts.gstatic.com/s/signikanegative/v6/q5TOjIw4CenPw6C-TW06FjICD6nLJtCPDEbD0_mhtO0.woff2) format('woff2'); 39 | unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 40 | } 41 | /* latin */ 42 | @font-face { 43 | font-family: 'Signika Negative'; 44 | font-style: normal; 45 | font-weight: 700; 46 | src: local('Signika Negative Bold'), local('SignikaNegative-Bold'), url(https://fonts.gstatic.com/s/signikanegative/v6/q5TOjIw4CenPw6C-TW06FuQ6_Aau4Cy11rcU9CM9cFc.woff2) format('woff2'); 47 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 48 | } 49 | -------------------------------------------------------------------------------- /gsap/GreenSock Animation Platform (GSAP) Speed Test_files/easing.js.download: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. 3 | Available via Academic Free License >= 2.1 OR the modified BSD license. 4 | see: http://dojotoolkit.org/license for details 5 | */ 6 | 7 | //>>built 8 | define("dojo/fx/easing",["../_base/lang"],function(_1){var _2={linear:function(n){return n;},quadIn:function(n){return Math.pow(n,2);},quadOut:function(n){return n*(n-2)*-1;},quadInOut:function(n){n=n*2;if(n<1){return Math.pow(n,2)/2;}return -1*((--n)*(n-2)-1)/2;},cubicIn:function(n){return Math.pow(n,3);},cubicOut:function(n){return Math.pow(n-1,3)+1;},cubicInOut:function(n){n=n*2;if(n<1){return Math.pow(n,3)/2;}n-=2;return (Math.pow(n,3)+2)/2;},quartIn:function(n){return Math.pow(n,4);},quartOut:function(n){return -1*(Math.pow(n-1,4)-1);},quartInOut:function(n){n=n*2;if(n<1){return Math.pow(n,4)/2;}n-=2;return -1/2*(Math.pow(n,4)-2);},quintIn:function(n){return Math.pow(n,5);},quintOut:function(n){return Math.pow(n-1,5)+1;},quintInOut:function(n){n=n*2;if(n<1){return Math.pow(n,5)/2;}n-=2;return (Math.pow(n,5)+2)/2;},sineIn:function(n){return -1*Math.cos(n*(Math.PI/2))+1;},sineOut:function(n){return Math.sin(n*(Math.PI/2));},sineInOut:function(n){return -1*(Math.cos(Math.PI*n)-1)/2;},expoIn:function(n){return (n==0)?0:Math.pow(2,10*(n-1));},expoOut:function(n){return (n==1)?1:(-1*Math.pow(2,-10*n)+1);},expoInOut:function(n){if(n==0){return 0;}if(n==1){return 1;}n=n*2;if(n<1){return Math.pow(2,10*(n-1))/2;}--n;return (-1*Math.pow(2,-10*n)+2)/2;},circIn:function(n){return -1*(Math.sqrt(1-Math.pow(n,2))-1);},circOut:function(n){n=n-1;return Math.sqrt(1-Math.pow(n,2));},circInOut:function(n){n=n*2;if(n<1){return -1/2*(Math.sqrt(1-Math.pow(n,2))-1);}n-=2;return 1/2*(Math.sqrt(1-Math.pow(n,2))+1);},backIn:function(n){var s=1.70158;return Math.pow(n,2)*((s+1)*n-s);},backOut:function(n){n=n-1;var s=1.70158;return Math.pow(n,2)*((s+1)*n+s)+1;},backInOut:function(n){var s=1.70158*1.525;n=n*2;if(n<1){return (Math.pow(n,2)*((s+1)*n-s))/2;}n-=2;return (Math.pow(n,2)*((s+1)*n+s)+2)/2;},elasticIn:function(n){if(n==0||n==1){return n;}var p=0.3;var s=p/4;n=n-1;return -1*Math.pow(2,10*n)*Math.sin((n-s)*(2*Math.PI)/p);},elasticOut:function(n){if(n==0||n==1){return n;}var p=0.3;var s=p/4;return Math.pow(2,-10*n)*Math.sin((n-s)*(2*Math.PI)/p)+1;},elasticInOut:function(n){if(n==0){return 0;}n=n*2;if(n==2){return 1;}var p=0.3*1.5;var s=p/4;if(n<1){n-=1;return -0.5*(Math.pow(2,10*n)*Math.sin((n-s)*(2*Math.PI)/p));}n-=1;return 0.5*(Math.pow(2,-10*n)*Math.sin((n-s)*(2*Math.PI)/p))+1;},bounceIn:function(n){return (1-_2.bounceOut(1-n));},bounceOut:function(n){var s=7.5625;var p=2.75;var l;if(n<(1/p)){l=s*Math.pow(n,2);}else{if(n<(2/p)){n-=(1.5/p);l=s*Math.pow(n,2)+0.75;}else{if(n<(2.5/p)){n-=(2.25/p);l=s*Math.pow(n,2)+0.9375;}else{n-=(2.625/p);l=s*Math.pow(n,2)+0.984375;}}}return l;},bounceInOut:function(n){if(n<0.5){return _2.bounceIn(n*2)/2;}return (_2.bounceOut(n*2-1)/2)+0.5;}};_1.setObject("dojo.fx.easing",_2);return _2;}); 9 | -------------------------------------------------------------------------------- /gsap/GreenSock Animation Platform (GSAP) Speed Test_files/jquery.gsap.min.js.download: -------------------------------------------------------------------------------- 1 | /*! 2 | * VERSION: 0.1.12 3 | * DATE: 2015-08-11 4 | * UPDATES AND DOCS AT: http://greensock.com/jquery-gsap-plugin/ 5 | * 6 | * Requires TweenLite version 1.8.0 or higher and CSSPlugin. 7 | * 8 | * @license Copyright (c) 2013-2016, GreenSock. All rights reserved. 9 | * This work is subject to the terms at http://greensock.com/standard-license or for 10 | * Club GreenSock members, the software agreement that was issued with your membership. 11 | * 12 | * @author: Jack Doyle, jack@greensock.com 13 | */ 14 | !function(a){"use strict";var b,c,d,e=a.fn.animate,f=a.fn.stop,g=!0,h=function(a){var b,c={};for(b in a)c[b]=a[b];return c},i={overwrite:1,delay:1,useFrames:1,runBackwards:1,easeParams:1,yoyo:1,immediateRender:1,repeat:1,repeatDelay:1,autoCSS:1},j=",scrollTop,scrollLeft,show,hide,toggle,",k=j,l=function(a,b){for(var c in i)i[c]&&void 0!==a[c]&&(b[c]=a[c])},m=function(a){return function(b){return a.getRatio(b)}},n={},o=function(){var e,f,g,h=window.GreenSockGlobals||window;if(b=h.TweenMax||h.TweenLite,b&&(e=(b.version+".0.0").split("."),f=!(Number(e[0])>0&&Number(e[1])>7),h=h.com.greensock,c=h.plugins.CSSPlugin,n=h.easing.Ease.map||{}),!b||!c||f)return b=null,void(!d&&window.console&&(window.console.log("The jquery.gsap.js plugin requires the TweenMax (or at least TweenLite and CSSPlugin) JavaScript file(s)."+(f?" Version "+e.join(".")+" is too old.":"")),d=!0));if(a.easing){for(g in n)a.easing[g]=m(n[g]);o=!1}};a.fn.animate=function(d,f,i,j){if(d=d||{},o&&(o(),!b||!c))return e.call(this,d,f,i,j);if(!g||d.skipGSAP===!0||"object"==typeof f&&"function"==typeof f.step)return e.call(this,d,f,i,j);var m,p,q,r,s=a.speed(f,i,j),t={ease:n[s.easing]||(s.easing===!1?n.linear:n.swing)},u=this,v="object"==typeof f?f.specialEasing:null;for(p in d){if(m=d[p],m instanceof Array&&n[m[1]]&&(v=v||{},v[p]=m[1],m=m[0]),"show"===m||"hide"===m||"toggle"===m||-1!==k.indexOf(p)&&-1!==k.indexOf(","+p+","))return e.call(this,d,f,i,j);t[-1===p.indexOf("-")?p:a.camelCase(p)]=m}if(v){t=h(t),r=[];for(p in v)m=r[r.length]={},l(t,m),m.ease=n[v[p]]||t.ease,-1!==p.indexOf("-")&&(p=a.camelCase(p)),m[p]=t[p],delete t[p];0===r.length&&(r=null)}return q=function(c){var d,e=h(t);if(r)for(d=r.length;--d>-1;)b.to(this,a.fx.off?0:s.duration/1e3,r[d]);e.onComplete=function(){c?c():s.old&&a(this).each(s.old)},b.to(this,a.fx.off?0:s.duration/1e3,e)},s.queue!==!1?(u.queue(s.queue,q),"function"==typeof s.old&&a(u[u.length-1]).queue(s.queue,function(a){s.old.call(u),a()})):q.call(u),u},a.fn.stop=function(a,c){if(f.call(this,a,c),b){if(c)for(var d,e=b.getTweensOf(this),g=e.length;--g>-1;)d=e[g].totalTime()/e[g].totalDuration(),d>0&&1>d&&e[g].seek(e[g].totalDuration());b.killTweensOf(this)}return this},a.gsap={enabled:function(a){g=a},version:"0.1.12",legacyProps:function(a){k=j+a+","}}}(jQuery); -------------------------------------------------------------------------------- /gsap/img/dot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/julianshapiro/velocity/767e35cac12120be526eef330e4d988b2c3cfc3c/gsap/img/dot.png -------------------------------------------------------------------------------- /legacy/README.md: -------------------------------------------------------------------------------- 1 | This folder contains code that is planned to go into a legacy browser support Javascript file for people targeting older versions of IE. 2 | 3 | This is a very low priority process, so there is no ETA (though people stating what parts are needed will help). 4 | -------------------------------------------------------------------------------- /legacy/blur.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | //namespace VelocityStatic.CSS { 8 | // export function blur(element, propertyValue) { 9 | // if (propertyValue === undefined) { 10 | // let extracted = parseFloat(propertyValue); 11 | // 12 | // /* If extracted is NaN, meaning the value isn't already extracted. */ 13 | // if (!(extracted || extracted === 0)) { 14 | // let blurComponent = propertyValue.toString().match(/blur\(([0-9]+[A-z]+)\)/i); 15 | // 16 | // /* If the filter string had a blur component, return just the blur value and unit type. */ 17 | // if (blurComponent) { 18 | // extracted = blurComponent[1]; 19 | // /* If the component doesn't exist, default blur to 0. */ 20 | // } else { 21 | // extracted = 0; 22 | // } 23 | // } 24 | // 25 | // return extracted + "px"; 26 | // } 27 | // /* For the blur effect to be fully de-applied, it needs to be set to "none" instead of 0. */ 28 | // if (!parseFloat(propertyValue)) { 29 | // return "none"; 30 | // } 31 | // return "blur(" + propertyValue + ")"; 32 | // } 33 | // 34 | // registerNormalization(["blur", blur]); 35 | //} 36 | -------------------------------------------------------------------------------- /legacy/borderColor.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | namespace VelocityStatic.CSS { 8 | /** 9 | * Handle a browser not supplying a compound borderColor property. 10 | */ 11 | function borderColor(element: HTMLorSVGElement): string; 12 | function borderColor(element: HTMLorSVGElement, propertyValue: string): boolean; 13 | function borderColor(element: HTMLorSVGElement, propertyValue?: string): string | boolean { 14 | if (propertyValue === undefined) { 15 | var top = getPropertyValue(element, "borderTopColor", true), 16 | right = getPropertyValue(element, "borderRightColor", true), 17 | bottom = getPropertyValue(element, "borderBottomColor", true), 18 | left = getPropertyValue(element, "borderLeftColor", true); 19 | 20 | if (left === right) { 21 | if (top === bottom) { 22 | if (top === left) { 23 | return top; 24 | } 25 | return top + " " + right; 26 | } 27 | return top + " " + right + " " + bottom; 28 | } 29 | return top + " " + right + " " + bottom + " " + left; 30 | } 31 | let sides = propertyValue.match(/((rgba?|hsla?)\([^\)]+\)|#[0-9a-f])/gi); 32 | 33 | if (sides.length) { 34 | switch (sides.length) { 35 | default: 36 | break; 37 | 38 | case 2: 39 | top = right = bottom = left = sides[1]; 40 | break; 41 | 42 | case 3: 43 | top = bottom = sides[1]; 44 | left = right = sides[2]; 45 | break; 46 | 47 | case 4: 48 | top = sides[1]; 49 | left = right = sides[2]; 50 | bottom = sides[3]; 51 | break; 52 | 53 | case 5: 54 | top = sides[1]; 55 | right = sides[2]; 56 | bottom = sides[3]; 57 | left = sides[4]; 58 | break; 59 | } 60 | } 61 | setPropertyValue(element, "borderColorTop", top); 62 | setPropertyValue(element, "borderColorRight", right); 63 | setPropertyValue(element, "borderColorBottom", bottom); 64 | setPropertyValue(element, "borderColorLeft", left); 65 | return true; 66 | } 67 | 68 | let style = State.prefixElement.style; 69 | 70 | if (!style.borderColor && style.borderTopColor) { 71 | registerNormalization(["borderColor", borderColor]); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /legacy/clip.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | //namespace VelocityStatic.CSS { 8 | // export function clip(element, propertyValue) { 9 | // if (propertyValue === undefined) { 10 | // let extracted; 11 | // 12 | // /* If Velocity also extracted this value, skip extraction. */ 13 | // if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) { 14 | // extracted = propertyValue; 15 | // } else { 16 | // /* Remove the "rect()" wrapper. */ 17 | // extracted = propertyValue.toString().match(CSS.RegEx.valueUnwrap); 18 | // 19 | // /* Strip off commas. */ 20 | // extracted = extracted ? extracted[1].replace(/,(\s+)?/g, " ") : propertyValue; 21 | // } 22 | // 23 | // return extracted; 24 | // } else { 25 | // return "rect(" + propertyValue + ")"; 26 | // } 27 | // } 28 | // 29 | // registerNormalization(["clip", clip]); 30 | //} -------------------------------------------------------------------------------- /legacy/normalisations.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // TODO: Need to override all properties for IE<=8 8 | 9 | if (IE <= 8) { 10 | try { 11 | /* A try/catch is used for IE<=8, which throws an error when "invalid" CSS values are set, e.g. a negative width. 12 | Try/catch is avoided for other browsers since it incurs a performance overhead. */ 13 | if (Normalizations[propertyName]) { 14 | Normalizations[propertyName](element, propertyValue); 15 | } else { 16 | element.style[propertyName] = propertyValue; 17 | } 18 | } catch (error) { 19 | if (debug) { 20 | console.log(`Browser does not support [${propertyValue}] for [${propertyName}]`); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /legacy/opacity.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | namespace VelocityStatic.CSS { 8 | if (IE <= 8) { 9 | /** 10 | * IE8 and below returns a "filter" value of "alpha(opacity=\d{1,3})". 11 | * Extract the value and convert it to a decimal value to match the 12 | * standard CSS opacity property's formatting. 13 | */ 14 | function opacity(element: HTMLorSVGElement): string; 15 | function opacity(element: HTMLorSVGElement, propertyValue: string): boolean; 16 | function opacity(element: HTMLorSVGElement, propertyValue?: string): string | boolean { 17 | if (propertyValue === undefined) { 18 | let filterValue: number | string = getPropertyValue(element, "filter"), 19 | extracted = filterValue.toString().match(/alpha\(opacity=(.*)\)/i); 20 | 21 | return String(extracted ? parseInt(extracted[1]) / 100 : 1); 22 | } 23 | let value = parseFloat(propertyValue); 24 | 25 | // Opacified elements are required to have their zoom 26 | // property set to a non-zero value. 27 | setPropertyValue(element, "zoom", 1); 28 | // Setting the filter property on elements with certain font 29 | // property combinations can result in a highly unappealing 30 | // ultra-bolding effect. There's no way to remedy this through 31 | // a tween, but dropping the value altogether (when opacity 32 | // hits 1) at leasts ensures that the glitch is gone 33 | // post-tweening. 34 | 35 | // As per the filter property's spec, convert the decimal value 36 | // to a whole number and wrap the value. 37 | setPropertyValue(element, "filter", value >= 1 ? "" : "alpha(opacity=" + Math.floor(value * 100) + ")"); 38 | return true; 39 | } 40 | 41 | registerNormalization(["opacity", opacity]); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "velocity-animate", 3 | "version": "2.0.6", 4 | "description": "Accelerated JavaScript animation.", 5 | "keywords": [ 6 | "velocity", 7 | "animation", 8 | "jquery", 9 | "animate", 10 | "ui", 11 | "velocity.js", 12 | "velocityjs", 13 | "javascript" 14 | ], 15 | "homepage": "http://velocityjs.org", 16 | "bugs": { 17 | "url": "http://github.com/julianshapiro/velocity/issues" 18 | }, 19 | "license": "MIT", 20 | "authors": [ 21 | { 22 | "name": "Julian Shapiro", 23 | "url": "http://julian.com/" 24 | }, 25 | { 26 | "name": "Ryc O'Chet", 27 | "url": "https://github.com/Rycochet" 28 | } 29 | ], 30 | "scripts": { 31 | "start": "rollup -w -c --environment BUILD,TEST", 32 | "build": "rollup -c --environment BUILD,MINIFY,TEST", 33 | "lint": "tslint src/**/*.ts src-ui/**/*.ts test/src/**/*.ts", 34 | "test": "rollup -c --environment TEST", 35 | "version": "npm run build && auto-changelog && git add ." 36 | }, 37 | "main": "velocity.min.js", 38 | "module": "velocity.es5.js", 39 | "types": "velocity.d.ts", 40 | "repository": "julianshapiro/velocity", 41 | "files": [ 42 | "velocity.js", 43 | "velocity.d.ts", 44 | "velocity.es5.js", 45 | "velocity.es5.js.map", 46 | "velocity.js.map", 47 | "velocity.min.js", 48 | "velocity.ui.js", 49 | "velocity.ui.js.map", 50 | "velocity.ui.min.js" 51 | ], 52 | "devDependencies": { 53 | "@types/qunit": "^2.5.2", 54 | "auto-changelog": "^1.8.0", 55 | "babel-core": "^6.26.3", 56 | "babel-plugin-external-helpers": "^6.22.0", 57 | "babel-polyfill": "^6.26.0", 58 | "babel-preset-env": "^1.7.0", 59 | "markdown": "^0.5.0", 60 | "octonode": "^0.9.3", 61 | "qunit": "^2.6.1", 62 | "qunit-assert-close": "^2.1.2", 63 | "rollup": "^0.63.5", 64 | "rollup-plugin-babel": "^3.0.7", 65 | "rollup-plugin-license": "^0.7.0", 66 | "rollup-plugin-sourcemaps": "^0.4.2", 67 | "rollup-plugin-strip-banner": "^0.2.0", 68 | "rollup-plugin-terser": "^1.0.1", 69 | "rollup-plugin-tslint": "^0.1.34", 70 | "rollup-plugin-typescript2": "^0.16.1", 71 | "rollup-plugin-uglify": "^4.0.0", 72 | "tslint": "^5.11.0", 73 | "typescript": "^3.0.1", 74 | "velocity-animate": "file:./" 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./bounce"; 8 | import "./flash"; 9 | import "./headShake"; 10 | import "./jello"; 11 | import "./pulse"; 12 | import "./rubberBand"; 13 | import "./shake"; 14 | import "./swing"; 15 | import "./tada"; 16 | import "./wobble"; 17 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/bounce.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounce", { 12 | "duration": 1000, 13 | "0,100%": { 14 | transformOrigin: "center bottom", 15 | }, 16 | "0%,20%,53%,80%,100%": { 17 | transform: ["translate3d(0,0px,0)", "easeOutCubic"], 18 | }, 19 | "40%,43%": { 20 | transform: ["translate3d(0,-30px,0)", "easeInQuint"], 21 | }, 22 | "70%": { 23 | transform: ["translate3d(0,-15px,0)", "easeInQuint"], 24 | }, 25 | "90%": { 26 | transform: "translate3d(0,-4px,0)", 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/flash.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "flash", { 12 | "duration": 1000, 13 | "0%,50%,100%": { 14 | opacity: "1", 15 | }, 16 | "25%,75%": { 17 | opacity: "0", 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/headShake.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "headShake", { 12 | "duration": 1000, 13 | "easing": "easeInOut", 14 | "0%": { 15 | transform: "translateX(0) rotateY(0)", 16 | }, 17 | "6.5%": { 18 | transform: "translateX(-6px) rotateY(-9deg)", 19 | }, 20 | "18.5%": { 21 | transform: "translateX(5px) rotateY(7deg)", 22 | }, 23 | "31.5%": { 24 | transform: "translateX(-3px) rotateY(-5deg)", 25 | }, 26 | "43.5%": { 27 | transform: "translateX(2px) rotateY(3deg)", 28 | }, 29 | "50%": { 30 | transform: "translateX(0) rotateY(0)", 31 | }, 32 | }); 33 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/jello.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "jello", { 12 | "duration": 1000, 13 | "0%,100%": { 14 | transformOrigin: "center", 15 | }, 16 | "0%,11.1%,100%": { 17 | transform: "skewX(0) skewY(0)", 18 | }, 19 | "22.2%": { 20 | transform: "skewX(-12.5deg) skewY(-12.5deg)", 21 | }, 22 | "33.3%": { 23 | transform: "skewX(6.25deg) skewY(6.25deg)", 24 | }, 25 | "44.4%": { 26 | transform: "skewX(-3.125deg) skewY(-3.125deg)", 27 | }, 28 | "55.5%": { 29 | transform: "skewX(1.5625deg) skewY(1.5625deg)", 30 | }, 31 | "66.6%": { 32 | transform: "skewX(-0.78125deg) skewY(-0.78125deg)", 33 | }, 34 | "77.7%": { 35 | transform: "skewX(0.390625deg) skewY(0.390625deg)", 36 | }, 37 | "88.8%": { 38 | transform: "skewX(-0.1953125deg) skewY(-0.1953125deg)", 39 | }, 40 | }); 41 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/pulse.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "pulse", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "scale3d(1,1,1)", 15 | }, 16 | "50%": { 17 | transform: "scale3d(1.05,1.05,1.05)", 18 | }, 19 | "100%": { 20 | transform: "scale3d(1,1,1)", 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/rubberBand.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rubberBand", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "scale3d(1,1,1)", 15 | }, 16 | "30%": { 17 | transform: "scale3d(1.25,0.75,1)", 18 | }, 19 | "40%": { 20 | transform: "scale3d(0.75,1.25,1)", 21 | }, 22 | "50%": { 23 | transform: "scale3d(1.15,0.85,1)", 24 | }, 25 | "65%": { 26 | transform: "scale3d(0.95,1.05,1)", 27 | }, 28 | "75%": { 29 | transform: "scale3d(1.05,0.95,1)", 30 | }, 31 | "100%": { 32 | transform: "scale3d(1,1,1)", 33 | }, 34 | }); 35 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/shake.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "shake", { 12 | "duration": 1000, 13 | "0%,100%": { 14 | transform: "translate3d(0,0,0)", 15 | }, 16 | "10%,30%,50%,70%,90%": { 17 | transform: "translate3d(-10px,0,0)", 18 | }, 19 | "20%,40%,60%,80%": { 20 | transform: "translate3d(10px,0,0)", 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/swing.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "swing", { 12 | "duration": 1000, 13 | "0%,100%": { 14 | transform: "rotate3d(0,0,1,0deg)", 15 | transformOrigin: "center", 16 | }, 17 | "20%": { 18 | transform: "rotate3d(0,0,1,15deg)", 19 | }, 20 | "40%": { 21 | transform: "rotate3d(0,0,1,-10deg)", 22 | }, 23 | "60%": { 24 | transform: "rotate3d(0,0,1,5deg)", 25 | }, 26 | "80%": { 27 | transform: "rotate3d(0,0,1,-5deg)", 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/tada.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "tada", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "scale3d(1,1,1) rotate3d(0,0,0,0)", 15 | }, 16 | "10%,20%": { 17 | transform: "scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg)", 18 | }, 19 | "30%,50%,70%,90%": { 20 | transform: "scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)", 21 | }, 22 | "40%,60%,80%": { 23 | transform: "scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)", 24 | }, 25 | "100%": { 26 | transform: "scale3d(1, 1, 1) rotate3d(0,0,0,0)", 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /src-ui/attention_seekers/wobble.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "wobble", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,0,0) rotate3d(0,0,0,0)", 15 | }, 16 | "15%": { 17 | transform: "translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)", 18 | }, 19 | "30%": { 20 | transform: "translate3d(20%,0,0) rotate3d(0,0,1,3deg)", 21 | }, 22 | "45%": { 23 | transform: "translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)", 24 | }, 25 | "60%": { 26 | transform: "translate3d(10%,0,0) rotate3d(0,0,1,2deg)", 27 | }, 28 | "75%": { 29 | transform: "translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)", 30 | }, 31 | "100%": { 32 | transform: "translate3d(0,0,0) rotate3d(0,0,0,0)", 33 | }, 34 | }); 35 | -------------------------------------------------------------------------------- /src-ui/bouncing_entrances/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./bounceIn"; 8 | import "./bounceInDown"; 9 | import "./bounceInLeft"; 10 | import "./bounceInRight"; 11 | import "./bounceInUp"; 12 | -------------------------------------------------------------------------------- /src-ui/bouncing_entrances/bounceIn.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceIn", { 12 | "duration": 750, 13 | "easing": "easeOutCubic", 14 | "0%": { 15 | opacity: "0", 16 | transform: "scale3d(0.3,0.3,0.3)", 17 | }, 18 | "20%": { 19 | transform: "scale3d(1.1,1.1,1.1)", 20 | }, 21 | "40%": { 22 | transform: "scale3d(0.9,0.9,0.9)", 23 | }, 24 | "60%": { 25 | opacity: "1", 26 | transform: "scale3d(1.03,1.03,1.03)", 27 | }, 28 | "80%": { 29 | transform: "scale3d(0.97,0.97,0.97)", 30 | }, 31 | "100%": { 32 | opacity: "1", 33 | transform: "scale3d(1,1,1)", 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /src-ui/bouncing_entrances/bounceInDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceInDown", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(0,-3000px,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["translate3d(0,25px,0)", "easeOutCubic"], 20 | }, 21 | "75%": { 22 | transform: ["translate3d(0,-10px,0)", "easeOutCubic"], 23 | }, 24 | "90%": { 25 | transform: ["translate3d(0,5px,0)", "easeOutCubic"], 26 | }, 27 | "100%": { 28 | transform: ["translate3d(0,0,0)", "easeOutCubic"], 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /src-ui/bouncing_entrances/bounceInLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceInLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(-3000px,0,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["translate3d(25px,0,0)", "easeOutCubic"], 20 | }, 21 | "75%": { 22 | transform: ["translate3d(-10px,0,0)", "easeOutCubic"], 23 | }, 24 | "90%": { 25 | transform: ["translate3d(5px,0,0)", "easeOutCubic"], 26 | }, 27 | "100%": { 28 | transform: ["translate3d(0,0,0)", "easeOutCubic"], 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /src-ui/bouncing_entrances/bounceInRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceInRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(3000px,0,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["translate3d(-25px,0,0)", "easeOutCubic"], 20 | }, 21 | "75%": { 22 | transform: ["translate3d(10px,0,0)", "easeOutCubic"], 23 | }, 24 | "90%": { 25 | transform: ["translate3d(-5px,0,0)", "easeOutCubic"], 26 | }, 27 | "100%": { 28 | transform: ["translate3d(0,0,0)", "easeOutCubic"], 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /src-ui/bouncing_entrances/bounceInUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceInUp", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(0,3000px,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["translate3d(0,-25px,0)", "easeOutCubic"], 20 | }, 21 | "75%": { 22 | transform: ["translate3d(0,10px,0)", "easeOutCubic"], 23 | }, 24 | "90%": { 25 | transform: ["translate3d(0,-5px,0)", "easeOutCubic"], 26 | }, 27 | "100%": { 28 | transform: ["translate3d(0,0,0)", "easeOutCubic"], 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /src-ui/bouncing_exits/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./bounceOut"; 8 | import "./bounceOutDown"; 9 | import "./bounceOutLeft"; 10 | import "./bounceOutRight"; 11 | import "./bounceOutUp"; 12 | -------------------------------------------------------------------------------- /src-ui/bouncing_exits/bounceOut.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceOut", { 12 | "duration": 750, 13 | "0%": { 14 | opacity: "1", 15 | transform: "scale3d(1,1,1)", 16 | }, 17 | "20%": { 18 | transform: "scale3d(0.9,0.9,0.9)", 19 | }, 20 | "50%,55%": { 21 | opacity: "1", 22 | transform: "scale3d(1.1,1.1,1.1)", 23 | }, 24 | "to": { 25 | opacity: "0", 26 | transform: "scale3d(0.3,0.3,0.3)", 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /src-ui/bouncing_exits/bounceOutDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceOutDown", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "20%": { 18 | transform: "translate3d(0,10px,0)", 19 | }, 20 | "40%,45%": { 21 | opacity: "1", 22 | transform: "translate3d(0,-20px,0)", 23 | }, 24 | "100%": { 25 | opacity: "0", 26 | transform: "translate3d(0,2000px,0)", 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /src-ui/bouncing_exits/bounceOutLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceOutLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "20%": { 18 | opacity: "1", 19 | transform: "translate3d(20px,0,0)", 20 | }, 21 | "100%": { 22 | opacity: "0", 23 | transform: "translate3d(-2000px,0,0)", 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /src-ui/bouncing_exits/bounceOutRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceOutRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "20%": { 18 | opacity: "1", 19 | transform: "translate3d(-20px,0,0)", 20 | }, 21 | "100%": { 22 | opacity: "0", 23 | transform: "translate3d(2000px,0,0)", 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /src-ui/bouncing_exits/bounceOutUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "bounceOutUp", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "20%": { 18 | transform: "translate3d(0,-10px,0)", 19 | }, 20 | "40%,45%": { 21 | opacity: "1", 22 | transform: "translate3d(0,20px,0)", 23 | }, 24 | "100%": { 25 | opacity: "0", 26 | transform: "translate3d(0,-2000px,0)", 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./fadeIn"; 8 | import "./fadeInDown"; 9 | import "./fadeInDownBig"; 10 | import "./fadeInLeft"; 11 | import "./fadeInLeftBig"; 12 | import "./fadeInRight"; 13 | import "./fadeInRightBig"; 14 | import "./fadeInUp"; 15 | import "./fadeInUpBig"; 16 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeIn.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeIn", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | }, 16 | "100%": { 17 | opacity: "1", 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInDown", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(0,-100%,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInDownBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInDownBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(0,-2000px,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(-100%,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInLeftBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInLeftBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(-2000px,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(100%,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInRightBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInRightBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(2000px,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInUp", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(0,100%,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_entrances/fadeInUpBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeInUpBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(0,2000px,0)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./fadeOut"; 8 | import "./fadeOutDown"; 9 | import "./fadeOutDownBig"; 10 | import "./fadeOutLeft"; 11 | import "./fadeOutLeftBig"; 12 | import "./fadeOutRight"; 13 | import "./fadeOutRightBig"; 14 | import "./fadeOutUp"; 15 | import "./fadeOutUpBig"; 16 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOut.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOut", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | }, 16 | "100%": { 17 | opacity: "0", 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutDown", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(0,100%,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutDownBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutDownBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(0,2000px,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(-100%,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutLeftBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutLeftBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(-2000px,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(100%,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutRightBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutRightBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(2000px,0,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutUp", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(0,-100%,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/fading_exits/fadeOutUpBig.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "fadeOutUpBig", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(0,-2000px,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/flippers/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./flip"; 8 | import "./flipInX"; 9 | import "./flipInY"; 10 | import "./flipOutX"; 11 | import "./flipOutY"; 12 | -------------------------------------------------------------------------------- /src-ui/flippers/flip.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "flip", { 12 | "duration": 1000, 13 | "0%,100%": { 14 | backfaceVisibility: "visible", 15 | }, 16 | "0%": { 17 | transform: ["perspective(400px) translate3d(0,0,0) rotate3d(0,1,0,-360deg) scale3d(1,1,1)", "easeOut"], 18 | }, 19 | "40%": { 20 | transform: ["perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg) scale3d(1,1,1)", "easeOut"], 21 | }, 22 | "50%": { 23 | transform: ["perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg) scale3d(1,1,1)", "easeIn"], 24 | }, 25 | "80%": { 26 | transform: ["perspective(400px) translate3d(0,0,0) rotate3d(0,1,0,0) scale3d(0.95,0.95,0.95)", "easeIn"], 27 | }, 28 | "100%": { 29 | transform: ["perspective(400px) translate3d(0,0,0) rotate3d(0,0,0,0) scale3d(1,1,1)", "ease-in"], 30 | }, 31 | }); 32 | -------------------------------------------------------------------------------- /src-ui/flippers/flipInX.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "flipInX", { 12 | "duration": 1000, 13 | "0%,100%": { 14 | backfaceVisibility: "visible", 15 | }, 16 | "0%": { 17 | opacity: "0", 18 | transform: "perspective(400px) rotate3d(1,0,0,90deg)", 19 | }, 20 | "40%": { 21 | transform: ["perspective(400px) rotate3d(1,0,0,-20deg)", "easeIn"], 22 | }, 23 | "60%": { 24 | opacity: "1", 25 | transform: "perspective(400px) rotate3d(1,0,0,10deg)", 26 | }, 27 | "80%": { 28 | transform: "perspective(400px) rotate3d(1,0,0,-5deg)", 29 | }, 30 | "100%": { 31 | transform: "perspective(400px) rotate3d(1,0,0,0)", 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /src-ui/flippers/flipInY.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "flipInY", { 12 | "duration": 1000, 13 | "0%,100%": { 14 | backfaceVisibility: "visible", 15 | }, 16 | "0%": { 17 | opacity: "0", 18 | transform: "perspective(400px) rotate3d(0,1,0,90deg)", 19 | }, 20 | "40%": { 21 | transform: ["perspective(400px) rotate3d(0,1,0,-20deg)", "easeIn"], 22 | }, 23 | "60%": { 24 | opacity: "1", 25 | transform: "perspective(400px) rotate3d(0,1,0,10deg)", 26 | }, 27 | "80%": { 28 | transform: "perspective(400px) rotate3d(0,1,0,-5deg)", 29 | }, 30 | "100%": { 31 | transform: "perspective(400px) rotate3d(0,1,0,0)", 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /src-ui/flippers/flipOutX.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "flipOutX", { 12 | "duration": 750, 13 | "0%,100%": { 14 | backfaceVisibility: "visible", 15 | }, 16 | "0%": { 17 | transform: "perspective(400px) rotate3d(1,0,0,0)", 18 | }, 19 | "30%": { 20 | opacity: "1", 21 | transform: "perspective(400px) rotate3d(1,0,0,-20deg)", 22 | }, 23 | "100%": { 24 | opacity: "0", 25 | transform: "perspective(400px) rotate3d(1,0,0,90deg)", 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /src-ui/flippers/flipOutY.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "flipOutY", { 12 | "duration": 750, 13 | "0%,100%": { 14 | backfaceVisibility: "visible", 15 | }, 16 | "0%": { 17 | transform: "perspective(400px) rotate3d(0,1,0,0)", 18 | }, 19 | "30%": { 20 | opacity: "1", 21 | transform: "perspective(400px) rotate3d(0,1,0,-20deg)", 22 | }, 23 | "100%": { 24 | opacity: "0", 25 | transform: "perspective(400px) rotate3d(0,1,0,90deg)", 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /src-ui/lightspeed/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./lightSpeedIn"; 8 | import "./lightSpeedOut"; 9 | -------------------------------------------------------------------------------- /src-ui/lightspeed/lightSpeedIn.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "lightSpeedIn", { 12 | "duration": 1000, 13 | "easing": "easeOut", 14 | "0%": { 15 | opacity: "0", 16 | transform: "translate3d(100%,0,0) skewX(-30deg)", 17 | }, 18 | "60%": { 19 | opacity: "1", 20 | transform: "translate3d(40%,0,0) skewX(20deg)", 21 | }, 22 | "80%": { 23 | opacity: "1", 24 | transform: "translate3d(20%,0,0) skewX(-5deg)", 25 | }, 26 | "100%": { 27 | opacity: "1", 28 | transform: "translate3d(0,0,0) skew(0)", 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /src-ui/lightspeed/lightSpeedOut.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "lightSpeedOut", { 12 | "duration": 1000, 13 | "easing": "easeIn", 14 | "0%": { 15 | opacity: "1", 16 | transform: "translate3d(0,0,0) skewX(0)", 17 | }, 18 | "100%": { 19 | opacity: "0", 20 | transform: "translate3d(100%,0,0) skewX(30deg)", 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /src-ui/rotating_entrances/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./rotateIn"; 8 | import "./rotateInDownLeft"; 9 | import "./rotateInDownRight"; 10 | import "./rotateInUpLeft"; 11 | import "./rotateInUpRight"; 12 | -------------------------------------------------------------------------------- /src-ui/rotating_entrances/rotateIn.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateIn", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "rotate3d(0,0,1,-200deg)", 16 | transformOrigin: "center", 17 | }, 18 | "100%": { 19 | opacity: "1", 20 | transform: "translate3d(0,0,0)", 21 | transformOrigin: "center", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_entrances/rotateInDownLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateInDownLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "rotate3d(0,0,1,-45deg)", 16 | transformOrigin: "left bottom", 17 | }, 18 | "100%": { 19 | opacity: "1", 20 | transform: "translate3d(0,0,0)", 21 | transformOrigin: "left bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_entrances/rotateInDownRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateInDownRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "rotate3d(0,0,1,45deg)", 16 | transformOrigin: "right bottom", 17 | }, 18 | "100%": { 19 | opacity: "1", 20 | transform: "translate3d(0,0,0)", 21 | transformOrigin: "right bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_entrances/rotateInUpLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateInUpLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "rotate3d(0,0,1,45deg)", 16 | transformOrigin: "left bottom", 17 | }, 18 | "100%": { 19 | opacity: "1", 20 | transform: "translate3d(0,0,0)", 21 | transformOrigin: "left bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_entrances/rotateInUpRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateInUpRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "rotate3d(0,0,1,-90deg)", 16 | transformOrigin: "right bottom", 17 | }, 18 | "100%": { 19 | opacity: "1", 20 | transform: "translate3d(0,0,0)", 21 | transformOrigin: "right bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_exits/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./rotateOut"; 8 | import "./rotateOutDownLeft"; 9 | import "./rotateOutDownRight"; 10 | import "./rotateOutUpLeft"; 11 | import "./rotateOutUpRight"; 12 | -------------------------------------------------------------------------------- /src-ui/rotating_exits/rotateOut.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateOut", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | transformOrigin: "center", 17 | }, 18 | "100%": { 19 | opacity: "0", 20 | transform: "rotate3d(0,0,1,200deg)", 21 | transformOrigin: "center", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_exits/rotateOutDownLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateOutDownLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | transformOrigin: "left bottom", 17 | }, 18 | "100%": { 19 | opacity: "0", 20 | transform: "rotate3d(0,0,1,45deg)", 21 | transformOrigin: "left bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_exits/rotateOutDownRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateOutDownRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | transformOrigin: "right bottom", 17 | }, 18 | "100%": { 19 | opacity: "0", 20 | transform: "rotate3d(0,0,1,-45deg)", 21 | transformOrigin: "right bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_exits/rotateOutUpLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateOutUpLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | transformOrigin: "left bottom", 17 | }, 18 | "100%": { 19 | opacity: "0", 20 | transform: "rotate3d(0,0,1,-45deg)", 21 | transformOrigin: "left bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/rotating_exits/rotateOutUpRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rotateOutUpRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0)", 16 | transformOrigin: "right bottom", 17 | }, 18 | "100%": { 19 | opacity: "0", 20 | transform: "rotate3d(0,0,1,90deg)", 21 | transformOrigin: "right bottom", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_entrances/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./slideInDown"; 8 | import "./slideInLeft"; 9 | import "./slideInRight"; 10 | import "./slideInUp"; 11 | -------------------------------------------------------------------------------- /src-ui/sliding_entrances/slideInDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideInDown", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,-100%,0)", 15 | visibility: "hidden", 16 | opacity: "0", 17 | }, 18 | "100%": { 19 | transform: "translate3d(0,0,0)", 20 | visibility: "visible", 21 | opacity: "1", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_entrances/slideInLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideInLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(-100%,0,0)", 15 | visibility: "hidden", 16 | opacity: "0", 17 | }, 18 | "100%": { 19 | transform: "translate3d(0,0,0)", 20 | visibility: "visible", 21 | opacity: "1", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_entrances/slideInRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideInRight", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(100%,0,0)", 15 | visibility: "hidden", 16 | opacity: "0", 17 | }, 18 | "100%": { 19 | transform: "translate3d(0,0,0)", 20 | visibility: "visible", 21 | opacity: "1", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_entrances/slideInUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideInUp", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,100%,0)", 15 | visibility: "hidden", 16 | opacity: "0", 17 | }, 18 | "100%": { 19 | transform: "translate3d(0,0,0)", 20 | visibility: "visible", 21 | opacity: "1", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_exits/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./slideOutDown"; 8 | import "./slideOutLeft"; 9 | import "./slideOutRight"; 10 | import "./slideOutUp"; 11 | -------------------------------------------------------------------------------- /src-ui/sliding_exits/slideOutDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideOutDown", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,0,0)", 15 | visibility: "visible", 16 | opacity: "1", 17 | }, 18 | "100%": { 19 | transform: "translate3d(0,-100%,0)", 20 | visibility: "hidden", 21 | opacity: "0", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_exits/slideOutLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideOutLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,0,0)", 15 | visibility: "visible", 16 | opacity: "1", 17 | }, 18 | "100%": { 19 | transform: "translate3d(-100%,0,0)", 20 | visibility: "hidden", 21 | opacity: "0", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_exits/slideOutRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideOutRight", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,0,0)", 15 | visibility: "visible", 16 | opacity: "1", 17 | }, 18 | "100%": { 19 | transform: "translate3d(100%,0,0)", 20 | visibility: "hidden", 21 | opacity: "0", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/sliding_exits/slideOutUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "slideOutUp", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "translate3d(0,0,0)", 15 | visibility: "visible", 16 | opacity: "1", 17 | }, 18 | "100%": { 19 | transform: "translate3d(0,100%,0)", 20 | visibility: "hidden", 21 | opacity: "0", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/specials/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./hinge"; 8 | import "./jackInTheBox"; 9 | import "./rollIn"; 10 | import "./rollOut"; 11 | -------------------------------------------------------------------------------- /src-ui/specials/hinge.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "hinge", { 12 | "duration": 2000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0) rotate3d(0,0,1,0)", 16 | transformOrigin: "top left", 17 | }, 18 | "20%,60%": { 19 | transform: ["translate3d(0,0,0) rotate3d(0,0,1,80deg)", "easeInOut"], 20 | }, 21 | "40%,80%": { 22 | opacity: "1", 23 | transform: ["translate3d(0,0,0) rotate3d(0,0,1,60deg)", "easeInOut"], 24 | }, 25 | "100%": { 26 | opacity: "0", 27 | transform: ["translate3d(0,700px,0) rotate3d(0,0,1,80deg)", "easeInOut"], 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /src-ui/specials/jackInTheBox.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "jackInTheBox", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "scale(0.1) rotate(30deg)", 16 | transformOrigin: "center bottom", 17 | }, 18 | "50%": { 19 | transform: "scale(0.5) rotate(-10deg)", 20 | }, 21 | "70%": { 22 | transform: "scale(0.7) rotate(3deg)", 23 | }, 24 | "100%": { 25 | opacity: "1", 26 | transform: "scale(1) rotate(0)", 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /src-ui/specials/rollIn.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rollIn", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)", 16 | }, 17 | "100%": { 18 | opacity: "1", 19 | transform: "translate3d(0,0,0) rotate3d(0,0,1,0)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/specials/rollOut.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "rollOut", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "translate3d(0,0,0) rotate3d(0,0,1,0)", 16 | }, 17 | "100%": { 18 | opacity: "0", 19 | transform: "translate3d(100%,0,0) rotate3d(0,0,1,120deg)", 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /src-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "files": [ 4 | "velocity.ui.ts" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src-ui/velocity.ui.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./attention_seekers/_all"; 8 | import "./bouncing_entrances/_all"; 9 | import "./bouncing_exits/_all"; 10 | import "./fading_entrances/_all"; 11 | import "./fading_exits/_all"; 12 | import "./flippers/_all"; 13 | import "./lightspeed/_all"; 14 | import "./rotating_entrances/_all"; 15 | import "./rotating_exits/_all"; 16 | import "./sliding_entrances/_all"; 17 | import "./sliding_exits/_all"; 18 | import "./specials/_all"; 19 | import "./zooming_entrances/_all"; 20 | import "./zooming_exits/_all"; 21 | -------------------------------------------------------------------------------- /src-ui/zooming_entrances/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./zoomIn"; 8 | import "./zoomInDown"; 9 | import "./zoomInLeft"; 10 | import "./zoomInRight"; 11 | import "./zoomInUp"; 12 | -------------------------------------------------------------------------------- /src-ui/zooming_entrances/zoomIn.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomIn", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "scale3d(0.3,0.3,0.3)", 16 | }, 17 | "50%": { 18 | opacity: "1", 19 | }, 20 | "100%": { 21 | transform: "scale3d(1,1,1)", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/zooming_entrances/zoomInDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomInDown", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["scale3d(0.475,0.475,0.475) translate3d(0,60px,0)", "easeInCubic"], 20 | }, 21 | "100%": { 22 | transform: ["scale3d(1,1,1) translate3d(0,0,0)", [0.175, 0.885, 0.32, 1]], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src-ui/zooming_entrances/zoomInLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomInLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "scale3d(0.1,0.1,0.1) translate3d(-1000px,0,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["scale3d(0.475,0.475,0.475) translate3d(10px,0,0)", "easeInCubic"], 20 | }, 21 | "100%": { 22 | transform: ["scale3d(1,1,1) translate3d(0,0,0)", [0.175, 0.885, 0.32, 1]], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src-ui/zooming_entrances/zoomInRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomInRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "scale3d(0.1,0.1,0.1) translate3d(1000px,0,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["scale3d(0.475,0.475,0.475) translate3d(-10px,0,0)", "easeInCubic"], 20 | }, 21 | "100%": { 22 | transform: ["scale3d(1,1,1) translate3d(0,0,0)", [0.175, 0.885, 0.32, 1]], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src-ui/zooming_entrances/zoomInUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomInUp", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "0", 15 | transform: "scale3d(0.1,0.1,0.1) translate3d(0,1000px,0)", 16 | }, 17 | "60%": { 18 | opacity: "1", 19 | transform: ["scale3d(0.475,0.475,0.475) translate3d(0,-60px,0)", "easeInCubic"], 20 | }, 21 | "100%": { 22 | transform: ["scale3d(1,1,1) translate3d(0,0,0)", [0.175, 0.885, 0.32, 1]], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src-ui/zooming_exits/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./zoomOut"; 8 | import "./zoomOutDown"; 9 | import "./zoomOutLeft"; 10 | import "./zoomOutRight"; 11 | import "./zoomOutUp"; 12 | -------------------------------------------------------------------------------- /src-ui/zooming_exits/zoomOut.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomOut", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "scale3d(1,1,1)", 15 | }, 16 | "50%": { 17 | opacity: "1", 18 | }, 19 | "100%": { 20 | opacity: "0", 21 | transform: "scale3d(0.3,0.3,0.3)", 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src-ui/zooming_exits/zoomOutDown.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomOutDown", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "scale3d(1,1,1) translate3d(0,0,0)", 15 | }, 16 | "40%": { 17 | opacity: "1", 18 | transform: ["scale3d(0.475,0.475,0.475) translate3d(0,60px,0)", [0.55, 0.055, 0.675, 0.19]], 19 | }, 20 | "100%": { 21 | opacity: "0", 22 | transform: ["scale3d(0.1,0.1,0.1) translate3d(0,-1000px,0)", [0.175, 0.885, 0.32, 1]], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src-ui/zooming_exits/zoomOutLeft.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomOutLeft", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "scale(1) translate3d(0,0,0)", 16 | transformOrigin: "left center", 17 | }, 18 | "40%": { 19 | opacity: "1", 20 | transform: "scale(0.475) translate3d(42px,0,0)", 21 | }, 22 | "100%": { 23 | opacity: "0", 24 | transform: "scale(0.1) translate3d(-2000px,0,0)", 25 | transformOrigin: "left center", 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /src-ui/zooming_exits/zoomOutRight.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomOutRight", { 12 | "duration": 1000, 13 | "0%": { 14 | opacity: "1", 15 | transform: "scale(1) translate3d(0,0,0)", 16 | transformOrigin: "right center", 17 | }, 18 | "40%": { 19 | opacity: "1", 20 | transform: "scale(0.475) translate3d(-42px, 0, 0)", 21 | }, 22 | "100%": { 23 | opacity: "0", 24 | transform: "scale(0.1) translate3d(2000px, 0, 0)", 25 | transformOrigin: "right center", 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /src-ui/zooming_exits/zoomOutUp.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Based on animate.css: https://github.com/daneden/animate.css 7 | */ 8 | 9 | import Velocity from "velocity-animate"; 10 | 11 | Velocity("registerSequence", "zoomOutUp", { 12 | "duration": 1000, 13 | "0%": { 14 | transform: "scale3d(1,1,1) translate3d(0,0,0)", 15 | }, 16 | "40%": { 17 | opacity: "1", 18 | transform: ["scale3d(0.475,0.475,0.475) translate3d(0,-60px,0)", [0.55, 0.055, 0.675, 0.19]], 19 | }, 20 | "100%": { 21 | opacity: "0", 22 | transform: ["scale3d(0.1,0.1,0.1) translate3d(0,1000px,0)", [0.175, 0.885, 0.32, 1]], 23 | }, 24 | }); 25 | -------------------------------------------------------------------------------- /src/Velocity/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./actions/_all"; 8 | import "./css/_all"; 9 | import "./easing/_all"; 10 | import "./normalizations/_all"; 11 | -------------------------------------------------------------------------------- /src/Velocity/actions/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./finish"; 8 | import "./option"; 9 | import "./pauseResume"; 10 | import "./property"; 11 | import "./reverse"; 12 | import "./stop"; 13 | import "./style"; 14 | import "./tween"; 15 | -------------------------------------------------------------------------------- /src/Velocity/actions/actions.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Actions that can be performed by passing a string instead of a propertiesMap. 7 | */ 8 | 9 | // Typedefs 10 | import {VelocityActionFn} from "../../../velocity.d"; 11 | 12 | // Project 13 | import {isFunction, isString, propertyIsEnumerable} from "../../types"; 14 | import {defineProperty} from "../../utility"; 15 | 16 | // Constants 17 | export const Actions: {[name: string]: VelocityActionFn} = {}; 18 | 19 | /** 20 | * Used to register an action. This should never be called by users 21 | * directly, instead it should be called via an action:
22 | * Velocity("registerAction", "name", VelocityActionFn); 23 | */ 24 | export function registerAction(args?: [string, VelocityActionFn], internal?: boolean) { 25 | const name: string = args[0], 26 | callback = args[1]; 27 | 28 | if (!isString(name)) { 29 | console.warn(`VelocityJS: Trying to set 'registerAction' name to an invalid value:`, name); 30 | } else if (!isFunction(callback)) { 31 | console.warn(`VelocityJS: Trying to set 'registerAction' callback to an invalid value:`, name, callback); 32 | } else if (Actions[name] && !propertyIsEnumerable(Actions, name)) { 33 | console.warn(`VelocityJS: Trying to override internal 'registerAction' callback`, name); 34 | } else if (internal === true) { 35 | defineProperty(Actions, name, callback); 36 | } else { 37 | Actions[name] = callback; 38 | } 39 | } 40 | 41 | registerAction(["registerAction", registerAction as any], true); 42 | -------------------------------------------------------------------------------- /src/Velocity/actions/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | export * from "./finish"; 8 | export * from "./option"; 9 | export * from "./pauseResume"; 10 | export * from "./property"; 11 | export * from "./reverse"; 12 | export * from "./stop"; 13 | export * from "./style"; 14 | export * from "./tween"; 15 | -------------------------------------------------------------------------------- /src/Velocity/actions/pauseResume.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Pause and resume animation. 7 | */ 8 | 9 | // Typedefs 10 | import {AnimationCall, AnimationFlags, VelocityPromise, VelocityResult} from "../../../velocity.d"; 11 | 12 | // Project 13 | import {isVelocityResult} from "../../types"; 14 | import {getValue} from "../../utility"; 15 | import {defaults} from "../defaults"; 16 | import {validateQueue} from "../options"; 17 | import {State} from "../state"; 18 | import {registerAction} from "./actions"; 19 | 20 | /** 21 | * Check if an animation should be paused / resumed. 22 | */ 23 | function checkAnimation(animation: AnimationCall, queueName: false | string, defaultQueue: false | string, isPaused: boolean) { 24 | if (queueName === undefined || queueName === getValue(animation.queue, animation.options.queue, defaultQueue)) { 25 | if (isPaused) { 26 | animation._flags |= AnimationFlags.PAUSED; // tslint:disable-line:no-bitwise 27 | } else { 28 | animation._flags &= ~AnimationFlags.PAUSED; // tslint:disable-line:no-bitwise 29 | } 30 | } 31 | } 32 | 33 | /** 34 | * Pause and Resume are call-wide (not on a per element basis). Thus, calling pause or resume on a 35 | * single element will cause any calls that contain tweens for that element to be paused/resumed 36 | * as well. 37 | */ 38 | function pauseResume(args?: any[], elements?: VelocityResult, promiseHandler?: VelocityPromise, action?: string) { 39 | const isPaused = action.indexOf("pause") === 0, 40 | queue = action.indexOf(".") >= 0 ? action.replace(/^.*\./, "") : undefined, 41 | queueName = queue === "false" ? false : validateQueue(args[0]), 42 | defaultQueue = defaults.queue; 43 | 44 | if (isVelocityResult(elements) && elements.velocity.animations) { 45 | for (const animation of elements.velocity.animations) { 46 | checkAnimation(animation, queueName, defaultQueue, isPaused); 47 | } 48 | } else { 49 | let activeCall: AnimationCall = State.first; 50 | 51 | while (activeCall) { 52 | if (!elements || elements.includes(activeCall.element)) { 53 | checkAnimation(activeCall, queueName, defaultQueue, isPaused); 54 | } 55 | activeCall = activeCall._next; 56 | } 57 | } 58 | if (promiseHandler) { 59 | if (isVelocityResult(elements) && elements.velocity.animations && elements.then) { 60 | elements.then(promiseHandler._resolver); 61 | } else { 62 | promiseHandler._resolver(elements); 63 | } 64 | } 65 | } 66 | 67 | registerAction(["pause", pauseResume], true); 68 | registerAction(["resume", pauseResume], true); 69 | -------------------------------------------------------------------------------- /src/Velocity/actions/reverse.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Actions that can be performed by passing a string instead of a propertiesMap. 7 | */ 8 | 9 | // Typedefs 10 | import {HTMLorSVGElement, VelocityPromise, VelocityResult} from "../../../velocity.d"; 11 | 12 | // Project 13 | import {registerAction} from "./actions"; 14 | 15 | registerAction(["reverse", (args?: any[], elements?: HTMLorSVGElement[] | VelocityResult, promiseHandler?: VelocityPromise, action?: string) => { 16 | // NOTE: Code needs to split out before here - but this is needed to prevent it being overridden 17 | throw new SyntaxError("VelocityJS: The 'reverse' action is built in and private."); 18 | }], true); 19 | -------------------------------------------------------------------------------- /src/Velocity/actions/stop.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Stop animation. 7 | */ 8 | 9 | // Typedefs 10 | import {AnimationCall, AnimationFlags, VelocityPromise, VelocityResult} from "../../../velocity.d"; 11 | 12 | // Project 13 | import {isVelocityResult} from "../../types"; 14 | import {getValue} from "../../utility"; 15 | import {completeCall} from "../complete"; 16 | import {defaults} from "../defaults"; 17 | import {validateQueue} from "../options"; 18 | import {State} from "../state"; 19 | import {validateTweens} from "../tweens"; 20 | import {registerAction} from "./actions"; 21 | 22 | /** 23 | * Check if an animation should be stopped, and if so then set the STOPPED 24 | * flag on it, then call complete. 25 | */ 26 | function checkAnimationShouldBeStopped(animation: AnimationCall, queueName: false | string, defaultQueue: false | string) { 27 | validateTweens(animation); 28 | if (queueName === undefined || queueName === getValue(animation.queue, animation.options.queue, defaultQueue)) { 29 | animation._flags |= AnimationFlags.STOPPED; // tslint:disable-line:no-bitwise 30 | completeCall(animation); 31 | } 32 | } 33 | 34 | /** 35 | * When the stop action is triggered, the elements' currently active call is 36 | * immediately stopped. When an element is stopped, the next item in its 37 | * animation queue is immediately triggered. If passed via a chained call 38 | * then this will only target the animations in that call, and not the 39 | * elements linked to it. 40 | * 41 | * A queue name may be passed in to specify that only animations on the 42 | * named queue are stopped. The default queue is named "". In addition the 43 | * value of `false` is allowed for the queue name. 44 | * 45 | * An final argument may be passed in to clear an element's remaining queued 46 | * calls. This may only be the value `true`. 47 | * 48 | * Note: The stop command runs prior to Velocity's Queueing phase since its 49 | * behavior is intended to take effect *immediately*, regardless of the 50 | * element's current queue state. 51 | */ 52 | function stop(args: any[], elements: VelocityResult, promiseHandler?: VelocityPromise, action?: string): void { 53 | const queueName: string | false = validateQueue(args[0], true), 54 | defaultQueue: false | string = defaults.queue, 55 | finishAll = args[queueName === undefined ? 0 : 1] === true; 56 | 57 | if (isVelocityResult(elements) && elements.velocity.animations) { 58 | for (const animation of elements.velocity.animations) { 59 | checkAnimationShouldBeStopped(animation, queueName, defaultQueue); 60 | } 61 | } else { 62 | while (State.firstNew) { 63 | validateTweens(State.firstNew); 64 | } 65 | for (let activeCall = State.first, nextCall: AnimationCall; activeCall && (finishAll || activeCall !== State.firstNew); activeCall = nextCall || State.firstNew) { 66 | nextCall = activeCall._next; 67 | if (!elements || elements.includes(activeCall.element)) { 68 | checkAnimationShouldBeStopped(activeCall, queueName, defaultQueue); 69 | } 70 | } 71 | } 72 | if (promiseHandler) { 73 | if (isVelocityResult(elements) && elements.velocity.animations && elements.then) { 74 | elements.then(promiseHandler._resolver); 75 | } else { 76 | promiseHandler._resolver(elements); 77 | } 78 | } 79 | } 80 | 81 | registerAction(["stop", stop], true); 82 | -------------------------------------------------------------------------------- /src/Velocity/actions/style.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Get or set a property from one or more elements. 7 | */ 8 | 9 | // Project 10 | import {registerAction} from "./actions"; 11 | import {propertyAction} from "./property"; 12 | 13 | registerAction(["style", propertyAction], true); 14 | -------------------------------------------------------------------------------- /src/Velocity/camelCase.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | /** 8 | * Cache every camelCase match to avoid repeating lookups. 9 | */ 10 | const cache: {[property: string]: string} = {}; 11 | 12 | /** 13 | * Camelcase a property name into its JavaScript notation (e.g. 14 | * "background-color" ==> "backgroundColor"). Camelcasing is used to 15 | * normalize property names between and across calls. 16 | */ 17 | export function camelCase(property: string): string { 18 | const fixed = cache[property]; 19 | 20 | if (fixed) { 21 | return fixed; 22 | } 23 | 24 | return cache[property] = property.replace(/-([a-z])/g, ($: string, letter: string) => letter.toUpperCase()); 25 | } 26 | -------------------------------------------------------------------------------- /src/Velocity/css/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./colors"; 8 | -------------------------------------------------------------------------------- /src/Velocity/css/augmentDimension.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement} from "../../../velocity.d"; 9 | 10 | // Project 11 | import {getPropertyValue} from "./getPropertyValue"; 12 | 13 | /** 14 | * Figure out the dimensions for this width / height based on the 15 | * potential borders and whether we care about them. 16 | */ 17 | export function augmentDimension(element: HTMLorSVGElement, name: "width" | "height", wantInner: boolean): number { 18 | const isBorderBox = getPropertyValue(element, "boxSizing") 19 | .toString() 20 | .toLowerCase() === "border-box"; 21 | 22 | if (isBorderBox === wantInner) { 23 | // in box-sizing mode, the CSS width / height accessors already 24 | // give the outerWidth / outerHeight. 25 | const sides = name === "width" ? ["Left", "Right"] : ["Top", "Bottom"], 26 | fields = [`padding${sides[0]}`, `padding${sides[1]}`, `border${sides[0]}Width`, `border${sides[1]}Width`]; 27 | let augment = 0; 28 | 29 | for (const field of fields) { 30 | const value = parseFloat(getPropertyValue(element, field)); 31 | 32 | if (!isNaN(value)) { 33 | augment += value; 34 | } 35 | } 36 | 37 | return wantInner ? -augment : augment; 38 | } 39 | 40 | return 0; 41 | } 42 | -------------------------------------------------------------------------------- /src/Velocity/css/fixColors.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Constants 8 | const rxColor6 = /#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/gi, 9 | rxColor3 = /#([a-f\d])([a-f\d])([a-f\d])/gi, 10 | rxColorName = /(rgba?\(\s*)?(\b[a-z]+\b)/g, 11 | rxRGB = /rgb(a?)\(([^\)]+)\)/gi, 12 | rxSpaces = /\s+/g; 13 | 14 | /** 15 | * This is the list of color names -> rgb values. The object is in here so 16 | * that the actual name conversion can be in a separate file and not 17 | * included for custom builds. 18 | */ 19 | export const ColorNames: {[name: string]: string} = {}; 20 | 21 | /** 22 | * Convert a hex list to an rgba value. Designed to be used in replace. 23 | */ 24 | function makeRGBA(ignore: any, r: string, g: string, b: string): string { 25 | return `rgba(${parseInt(r, 16)},${parseInt(g, 16)},${parseInt(b, 16)},1)`; 26 | } 27 | 28 | /** 29 | * Replace any css colour name with its rgba() value. It is possible to use 30 | * the name within an "rgba(blue, 0.4)" string this way. 31 | */ 32 | export function fixColors(str: string): string { 33 | return str 34 | .replace(rxColor6, makeRGBA) 35 | .replace(rxColor3, ($0, r, g, b) => { 36 | return makeRGBA($0, r + r, g + g, b + b); 37 | }) 38 | .replace(rxColorName, ($0, $1, $2) => { 39 | if (ColorNames[$2]) { 40 | return ($1 ? $1 : "rgba(") + ColorNames[$2] + ($1 ? "" : ",1)"); 41 | } 42 | 43 | return $0; 44 | }) 45 | .replace(rxRGB, ($0, $1, $2: string) => { 46 | return `rgba(${$2.replace(rxSpaces, "") + ($1 ? "" : ",1")})`; 47 | }); 48 | } 49 | -------------------------------------------------------------------------------- /src/Velocity/css/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | export * from "./colors"; 8 | -------------------------------------------------------------------------------- /src/Velocity/css/removeNestedCalc.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | /** 8 | * Remove nested `calc(0px + *)` or `calc(* + (0px + *))` correctly. 9 | */ 10 | export function removeNestedCalc(value: string): string { 11 | if (value.indexOf("calc(") >= 0) { 12 | const tokens = value.split(/([\(\)])/); 13 | let depth = 0; 14 | 15 | for (let i = 0; i < tokens.length; i++) { 16 | const token = tokens[i]; 17 | 18 | switch (token) { 19 | case "(": 20 | depth++; 21 | break; 22 | 23 | case ")": 24 | depth--; 25 | break; 26 | 27 | default: 28 | if (depth && token[0] === "0") { 29 | tokens[i] = token.replace(/^0[a-z%]+ \+ /, ""); 30 | } 31 | break; 32 | } 33 | } 34 | 35 | return tokens.join("") 36 | .replace(/(?:calc)?\(([0-9\.]+[a-z%]+)\)/g, "$1"); 37 | } 38 | 39 | return value; 40 | } 41 | -------------------------------------------------------------------------------- /src/Velocity/css/setPropertyValue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement, VelocityNormalizationsFn} from "../../../velocity.d"; 9 | 10 | // Project 11 | import Velocity from "../../velocity"; 12 | import {Data} from "../data"; 13 | import {getNormalization} from "../normalizations/normalizations"; 14 | import {NoCacheNormalizations} from "../normalizations/normalizationsObject"; 15 | 16 | /** 17 | * The singular setPropertyValue, which routes the logic for all 18 | * normalizations. 19 | */ 20 | export function setPropertyValue(element: HTMLorSVGElement, propertyName: string, propertyValue: any, fn?: VelocityNormalizationsFn) { 21 | const noCache = NoCacheNormalizations.has(propertyName), 22 | data = !noCache && Data(element); 23 | 24 | if (noCache || (data && data.cache[propertyName] !== propertyValue)) { 25 | // By setting it to undefined we force a true "get" later 26 | if (!noCache) { 27 | data.cache[propertyName] = propertyValue || undefined; 28 | } 29 | fn = fn || getNormalization(element, propertyName); 30 | if (fn) { 31 | fn(element, propertyValue); 32 | } 33 | if (Velocity.debug >= 2) { 34 | console.info(`Set "${propertyName}": "${propertyValue}"`, element); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/Velocity/data.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {ElementData, HTMLorSVGElement} from "../../velocity.d"; 9 | 10 | // Project 11 | import {isString} from "../types"; 12 | import {constructors} from "./normalizations/normalizationsObject"; 13 | 14 | // Constants 15 | const dataName = "velocityData"; 16 | 17 | /** 18 | * Get (and create) the internal data store for an element. 19 | */ 20 | export function Data(element: HTMLorSVGElement): ElementData { 21 | // Use a string member so Uglify doesn't mangle it. 22 | const data = element[dataName]; 23 | 24 | if (data) { 25 | return data; 26 | } 27 | const window = element.ownerDocument.defaultView; 28 | let types = 0; 29 | 30 | for (let index = 0; index < constructors.length; index++) { 31 | const constructor = constructors[index]; 32 | 33 | if (isString(constructor)) { 34 | if (element instanceof window[constructor]) { 35 | types |= 1 << index; // tslint:disable-line:no-bitwise 36 | } 37 | } else if (element instanceof constructor) { 38 | types |= 1 << index; // tslint:disable-line:no-bitwise 39 | } 40 | } 41 | // Use an intermediate object so it errors on incorrect data. 42 | const newData: ElementData = { 43 | types, 44 | count: 0, 45 | computedStyle: null, 46 | cache: {} as any, 47 | queueList: {}, 48 | lastAnimationList: {}, 49 | lastFinishList: {}, 50 | window, 51 | }; 52 | 53 | Object.defineProperty(element, dataName, { 54 | value: newData, 55 | }); 56 | 57 | return newData; 58 | } 59 | -------------------------------------------------------------------------------- /src/Velocity/easing/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./back"; 8 | import "./bezier"; 9 | import "./bounce"; 10 | import "./elastic"; 11 | import "./spring_rk4"; 12 | import "./step"; 13 | import "./string"; 14 | -------------------------------------------------------------------------------- /src/Velocity/easing/back.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Back easings, based on code from https://github.com/yuichiroharai/easeplus-velocity 7 | */ 8 | 9 | // Project 10 | import {registerEasing} from "./easings"; 11 | 12 | export function registerBackIn(name: string, amount: number) { 13 | registerEasing([name, (percentComplete: number, startValue: number, endValue: number): number => { 14 | if (percentComplete === 0) { 15 | return startValue; 16 | } 17 | if (percentComplete === 1) { 18 | return endValue; 19 | } 20 | 21 | return Math.pow(percentComplete, 2) * ((amount + 1) * percentComplete - amount) * (endValue - startValue); 22 | }]); 23 | } 24 | 25 | export function registerBackOut(name: string, amount: number) { 26 | registerEasing([name, (percentComplete: number, startValue: number, endValue: number): number => { 27 | if (percentComplete === 0) { 28 | return startValue; 29 | } 30 | if (percentComplete === 1) { 31 | return endValue; 32 | } 33 | 34 | return (Math.pow(--percentComplete, 2) * ((amount + 1) * percentComplete + amount) + 1) * (endValue - startValue); 35 | }]); 36 | } 37 | 38 | export function registerBackInOut(name: string, amount: number) { 39 | amount *= 1.525; 40 | registerEasing([name, (percentComplete: number, startValue: number, endValue: number): number => { 41 | if (percentComplete === 0) { 42 | return startValue; 43 | } 44 | if (percentComplete === 1) { 45 | return endValue; 46 | } 47 | percentComplete *= 2; 48 | 49 | return (percentComplete < 1 50 | ? (Math.pow(percentComplete, 2) * ((amount + 1) * percentComplete - amount)) 51 | : (Math.pow(percentComplete - 2, 2) * ((amount + 1) * (percentComplete - 2) + amount) + 2) 52 | ) * 0.5 * (endValue - startValue); 53 | }]); 54 | } 55 | 56 | registerBackIn("easeInBack", 1.7); 57 | registerBackOut("easeOutBack", 1.7); 58 | registerBackInOut("easeInOutBack", 1.7); 59 | 60 | // TODO: Expose these as actions to register custom easings? 61 | -------------------------------------------------------------------------------- /src/Velocity/easing/bounce.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Bounce easings, based on code from https://github.com/yuichiroharai/easeplus-velocity 7 | */ 8 | 9 | // Project 10 | import {registerEasing} from "./easings"; 11 | 12 | function easeOutBouncePercent(percentComplete: number): number { 13 | if (percentComplete < 1 / 2.75) { 14 | return (7.5625 * percentComplete * percentComplete); 15 | } 16 | if (percentComplete < 2 / 2.75) { 17 | return (7.5625 * (percentComplete -= 1.5 / 2.75) * percentComplete + 0.75); 18 | } 19 | if (percentComplete < 2.5 / 2.75) { 20 | return (7.5625 * (percentComplete -= 2.25 / 2.75) * percentComplete + 0.9375); 21 | } 22 | 23 | return (7.5625 * (percentComplete -= 2.625 / 2.75) * percentComplete + 0.984375); 24 | } 25 | 26 | function easeInBouncePercent(percentComplete: number): number { 27 | return 1 - easeOutBouncePercent(1 - percentComplete); 28 | } 29 | 30 | export function easeInBounce(percentComplete: number, startValue: number, endValue: number): number { 31 | if (percentComplete === 0) { 32 | return startValue; 33 | } 34 | if (percentComplete === 1) { 35 | return endValue; 36 | } 37 | 38 | return easeInBouncePercent(percentComplete) * (endValue - startValue); 39 | } 40 | 41 | export function easeOutBounce(percentComplete: number, startValue: number, endValue: number): number { 42 | if (percentComplete === 0) { 43 | return startValue; 44 | } 45 | if (percentComplete === 1) { 46 | return endValue; 47 | } 48 | 49 | return easeOutBouncePercent(percentComplete) * (endValue - startValue); 50 | } 51 | 52 | export function easeInOutBounce(percentComplete: number, startValue: number, endValue: number): number { 53 | if (percentComplete === 0) { 54 | return startValue; 55 | } 56 | if (percentComplete === 1) { 57 | return endValue; 58 | } 59 | 60 | return (percentComplete < 0.5 61 | ? easeInBouncePercent(percentComplete * 2) * 0.5 62 | : easeOutBouncePercent(percentComplete * 2 - 1) * 0.5 + 0.5 63 | ) * (endValue - startValue); 64 | } 65 | 66 | registerEasing(["easeInBounce", easeInBounce]); 67 | registerEasing(["easeOutBounce", easeOutBounce]); 68 | registerEasing(["easeInOutBounce", easeInOutBounce]); 69 | -------------------------------------------------------------------------------- /src/Velocity/easing/easings.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {VelocityEasingFn} from "../../../velocity.d"; 9 | 10 | // Project 11 | import {isFunction, isString} from "../../types"; 12 | import {registerAction} from "../actions/actions"; 13 | 14 | // Constants 15 | export const Easings: {[name: string]: VelocityEasingFn} = {}; 16 | 17 | /** 18 | * Used to register a easing. This should never be called by users 19 | * directly, instead it should be called via an action:
20 | * Velocity("registerEasing", "name", VelocityEasingFn); 21 | */ 22 | export function registerEasing(args?: [string, VelocityEasingFn]) { 23 | const name: string = args[0], 24 | callback = args[1]; 25 | 26 | if (!isString(name)) { 27 | console.warn(`VelocityJS: Trying to set 'registerEasing' name to an invalid value:`, name); 28 | } else if (!isFunction(callback)) { 29 | console.warn(`VelocityJS: Trying to set 'registerEasing' callback to an invalid value:`, name, callback); 30 | } else if (Easings[name]) { 31 | console.warn(`VelocityJS: Trying to override 'registerEasing' callback`, name); 32 | } else { 33 | Easings[name] = callback; 34 | } 35 | } 36 | 37 | registerAction(["registerEasing", registerEasing], true); 38 | 39 | /** 40 | * Linear easing, used for sequence parts that don't have an actual easing 41 | * function. 42 | */ 43 | export function linearEasing(percentComplete, startValue, endValue, property) { 44 | return startValue + percentComplete * (endValue - startValue); 45 | } 46 | 47 | /** 48 | * Swing is the default for jQuery and Velocity. 49 | */ 50 | export function swingEasing(percentComplete, startValue, endValue) { 51 | return startValue + (0.5 - Math.cos(percentComplete * Math.PI) / 2) * (endValue - startValue); 52 | } 53 | 54 | /** 55 | * A less exaggerated version of easeInOutElastic. 56 | */ 57 | export function springEasing(percentComplete, startValue, endValue) { 58 | return startValue + (1 - (Math.cos(percentComplete * 4.5 * Math.PI) * Math.exp(-percentComplete * 6))) * (endValue - startValue); 59 | } 60 | 61 | registerEasing(["linear", linearEasing]); 62 | registerEasing(["swing", swingEasing]); 63 | registerEasing(["spring", springEasing]); 64 | -------------------------------------------------------------------------------- /src/Velocity/easing/elastic.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Elastic easings, based on code from https://github.com/yuichiroharai/easeplus-velocity 7 | */ 8 | 9 | // Project 10 | import {registerEasing} from "./easings"; 11 | 12 | // Constants 13 | const PI2 = Math.PI * 2; 14 | 15 | export function registerElasticIn(name: string, amplitude: number, period: number) { 16 | registerEasing([name, (percentComplete: number, startValue: number, endValue: number): number => { 17 | if (percentComplete === 0) { 18 | return startValue; 19 | } 20 | if (percentComplete === 1) { 21 | return endValue; 22 | } 23 | 24 | return -(amplitude * Math.pow(2, 10 * (percentComplete -= 1)) * Math.sin((percentComplete - (period / PI2 * Math.asin(1 / amplitude))) * PI2 / period)) * (endValue - startValue); 25 | }]); 26 | } 27 | 28 | export function registerElasticOut(name: string, amplitude: number, period: number) { 29 | registerEasing([name, (percentComplete: number, startValue: number, endValue: number): number => { 30 | if (percentComplete === 0) { 31 | return startValue; 32 | } 33 | if (percentComplete === 1) { 34 | return endValue; 35 | } 36 | 37 | return (amplitude * Math.pow(2, -10 * percentComplete) * Math.sin((percentComplete - (period / PI2 * Math.asin(1 / amplitude))) * PI2 / period) + 1) * (endValue - startValue); 38 | }]); 39 | } 40 | 41 | export function registerElasticInOut(name: string, amplitude: number, period: number) { 42 | registerEasing([name, (percentComplete: number, startValue: number, endValue: number): number => { 43 | if (percentComplete === 0) { 44 | return startValue; 45 | } 46 | if (percentComplete === 1) { 47 | return endValue; 48 | } 49 | const s = period / PI2 * Math.asin(1 / amplitude); 50 | 51 | percentComplete = percentComplete * 2 - 1; 52 | 53 | return (percentComplete < 0 54 | ? -0.5 * (amplitude * Math.pow(2, 10 * percentComplete) * Math.sin((percentComplete - s) * PI2 / period)) 55 | : amplitude * Math.pow(2, -10 * percentComplete) * Math.sin((percentComplete - s) * PI2 / period) * 0.5 + 1 56 | ) * (endValue - startValue); 57 | }]); 58 | } 59 | 60 | registerElasticIn("easeInElastic", 1, 0.3); 61 | registerElasticOut("easeOutElastic", 1, 0.3); 62 | registerElasticInOut("easeInOutElastic", 1, 0.3 * 1.5); 63 | 64 | // TODO: Expose these as actions to register custom easings? 65 | -------------------------------------------------------------------------------- /src/Velocity/easing/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | export * from "./back"; 8 | export * from "./bezier"; 9 | export * from "./bounce"; 10 | export * from "./elastic"; 11 | export * from "./spring_rk4"; 12 | export * from "./step"; 13 | export * from "./string"; 14 | -------------------------------------------------------------------------------- /src/Velocity/easing/step.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details 5 | * 6 | * Step easing generator. 7 | */ 8 | 9 | // Typedefs 10 | import {VelocityEasingFn} from "../../../velocity.d"; 11 | 12 | // Constants 13 | const cache: {[steps: number]: VelocityEasingFn} = {}; 14 | 15 | export function generateStep(steps): VelocityEasingFn { 16 | const fn = cache[steps]; 17 | 18 | if (fn) { 19 | return fn; 20 | } 21 | 22 | return cache[steps] = (percentComplete: number, startValue: number, endValue: number) => { 23 | if (percentComplete === 0) { 24 | return startValue; 25 | } 26 | if (percentComplete === 1) { 27 | return endValue; 28 | } 29 | 30 | return startValue + Math.round(percentComplete * steps) * (1 / steps) * (endValue - startValue); 31 | }; 32 | } 33 | -------------------------------------------------------------------------------- /src/Velocity/easing/string.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Easings to act on strings, either set at the start or at the end depending on 7 | * need. 8 | */ 9 | 10 | // Project 11 | import {registerEasing} from "./easings"; 12 | 13 | /** 14 | * Easing function that sets to the specified value immediately after the 15 | * animation starts. 16 | */ 17 | export function atStart(percentComplete: number, startValue: any, endValue: any): any { 18 | return percentComplete === 0 19 | ? startValue 20 | : endValue; 21 | } 22 | 23 | /** 24 | * Easing function that sets to the specified value while the animation is 25 | * running. 26 | */ 27 | export function during(percentComplete: number, startValue: any, endValue: any): any { 28 | return percentComplete === 0 || percentComplete === 1 29 | ? startValue 30 | : endValue; 31 | } 32 | 33 | /** 34 | * Easing function that sets to the specified value when the animation ends. 35 | */ 36 | export function atEnd(percentComplete: number, startValue: any, endValue: any): any { 37 | return percentComplete === 1 38 | ? endValue 39 | : startValue; 40 | } 41 | 42 | registerEasing(["at-start", atStart]); 43 | registerEasing(["during", during]); 44 | registerEasing(["at-end", atEnd]); 45 | -------------------------------------------------------------------------------- /src/Velocity/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | export * from "./actions"; 8 | export * from "./css"; 9 | export * from "./easing"; 10 | export * from "./normalizations"; 11 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./dimensions"; 8 | import "./display"; 9 | import "./scroll"; 10 | import "./style"; 11 | import "./svg/_all"; 12 | import "./tween"; 13 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/dimensions.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement, VelocityNormalizationsFn} from "../../../velocity.d"; 9 | 10 | // Project 11 | import {augmentDimension} from "../css/augmentDimension"; 12 | import {setPropertyValue} from "../css/setPropertyValue"; 13 | import {registerNormalization} from "./normalizations"; 14 | 15 | /** 16 | * Get/set the inner/outer dimension. 17 | */ 18 | function getDimension(name: "width" | "height", wantInner: boolean) { 19 | return ((element: HTMLorSVGElement, propertyValue?: string): string | void => { 20 | if (propertyValue === undefined) { 21 | return augmentDimension(element, name, wantInner) + "px"; 22 | } 23 | setPropertyValue(element, name, (parseFloat(propertyValue) - augmentDimension(element, name, wantInner)) + "px"); 24 | }) as VelocityNormalizationsFn; 25 | } 26 | 27 | registerNormalization(["Element", "innerWidth", getDimension("width", true)]); 28 | registerNormalization(["Element", "innerHeight", getDimension("height", true)]); 29 | registerNormalization(["Element", "outerWidth", getDimension("width", false)]); 30 | registerNormalization(["Element", "outerHeight", getDimension("height", false)]); 31 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/display.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement} from "../../../velocity.d"; 9 | 10 | // Project 11 | import {computePropertyValue} from "../css/getPropertyValue"; 12 | import {Data} from "../data"; 13 | import {registerNormalization} from "./normalizations"; 14 | 15 | // Constants 16 | export const inlineRx = /^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|let|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i, 17 | listItemRx = /^(li)$/i, 18 | tableRowRx = /^(tr)$/i, 19 | tableRx = /^(table)$/i, 20 | tableRowGroupRx = /^(tbody)$/i; 21 | 22 | /** 23 | * Display has an extra value of "auto" that works out the correct value 24 | * based on the type of element. 25 | */ 26 | function display(element: HTMLorSVGElement): string; 27 | function display(element: HTMLorSVGElement, propertyValue: string): void; 28 | function display(element: HTMLorSVGElement, propertyValue?: string): string | void { 29 | const style = element.style; 30 | 31 | if (propertyValue === undefined) { 32 | return computePropertyValue(element, "display"); 33 | } 34 | if (propertyValue === "auto") { 35 | const nodeName = element && element.nodeName, 36 | data = Data(element); 37 | 38 | if (inlineRx.test(nodeName)) { 39 | propertyValue = "inline"; 40 | } else if (listItemRx.test(nodeName)) { 41 | propertyValue = "list-item"; 42 | } else if (tableRowRx.test(nodeName)) { 43 | propertyValue = "table-row"; 44 | } else if (tableRx.test(nodeName)) { 45 | propertyValue = "table"; 46 | } else if (tableRowGroupRx.test(nodeName)) { 47 | propertyValue = "table-row-group"; 48 | } else { 49 | // Default to "block" when no match is found. 50 | propertyValue = "block"; 51 | } 52 | // IMPORTANT: We need to do this as getPropertyValue bypasses the 53 | // Normalisation when it exists in the cache. 54 | data.cache["display"] = propertyValue; 55 | } 56 | style.display = propertyValue; 57 | } 58 | 59 | registerNormalization(["Element", "display", display]); 60 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | export * from "./dimensions"; 8 | export * from "./display"; 9 | export * from "./scroll"; 10 | export * from "./style"; 11 | export * from "./svg"; 12 | export * from "./tween"; 13 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/normalizationsObject.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Normalisations are used when getting or setting a (normally css compound 7 | * properties) value that can have a different order in different browsers. 8 | * 9 | * It can also be used to extend and create specific properties that otherwise 10 | * don't exist (such as for scrolling, or inner/outer dimensions). 11 | */ 12 | 13 | // Typedefs 14 | import {VelocityNormalizationsFn} from "../../../velocity.d"; 15 | 16 | /** 17 | * The highest type index for finding the best normalization for a property. 18 | */ 19 | export let MaxType: number = -1; 20 | 21 | /** 22 | * Unlike "actions", normalizations can always be replaced by users. 23 | */ 24 | export const Normalizations: {[name: string]: VelocityNormalizationsFn}[] = []; 25 | 26 | /** 27 | * Store a cross-reference to units to be added to specific normalization 28 | * functions if the user supplies a unit-less number. 29 | * 30 | * This is pretty much confined to adding "px" to several css properties. 31 | */ 32 | export const NormalizationUnits: {[unit: string]: VelocityNormalizationsFn[]} = {}; 33 | 34 | /** 35 | * Any normalisations that should never be cached are listed here. 36 | * Faster than an array - https://jsperf.com/array-includes-and-find-methods-vs-set-has 37 | */ 38 | export const NoCacheNormalizations = new Set(); 39 | 40 | /** 41 | * Used to define a constructor. 42 | */ 43 | export interface ClassConstructor { 44 | new(): object; 45 | } 46 | 47 | /** 48 | * An array of classes used for the per-class normalizations. This 49 | * translates into a bitwise enum for quick cross-reference, and so that 50 | * the element doesn't need multiple instanceof calls every 51 | * frame. 52 | */ 53 | export const constructors: (ClassConstructor | string)[] = []; 54 | 55 | /** 56 | * A cache of the various constructors we've found and mapping to their real 57 | * name - saves expensive lookups. 58 | */ 59 | export const constructorCache = new Map(); 60 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/scroll.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement, VelocityNormalizationsFn} from "../../../velocity.d"; 9 | 10 | // Project 11 | import {getPropertyValue} from "../css/getPropertyValue"; 12 | import {registerNormalization} from "./normalizations"; 13 | 14 | /** 15 | * Get the scrollWidth of an element. 16 | */ 17 | function clientWidth(element: HTMLorSVGElement): string; 18 | function clientWidth(element: HTMLorSVGElement, propertyValue: string): void; 19 | function clientWidth(element: HTMLorSVGElement, propertyValue?: string): string | void { 20 | if (propertyValue == null) { 21 | return element.clientWidth + "px"; 22 | } 23 | } 24 | 25 | /** 26 | * Get the scrollWidth of an element. 27 | */ 28 | function scrollWidth(element: HTMLorSVGElement): string; 29 | function scrollWidth(element: HTMLorSVGElement, propertyValue: string): void; 30 | function scrollWidth(element: HTMLorSVGElement, propertyValue?: string): string | void { 31 | if (propertyValue == null) { 32 | return element.scrollWidth + "px"; 33 | } 34 | } 35 | 36 | /** 37 | * Get the scrollHeight of an element. 38 | */ 39 | function clientHeight(element: HTMLorSVGElement): string; 40 | function clientHeight(element: HTMLorSVGElement, propertyValue: string): void; 41 | function clientHeight(element: HTMLorSVGElement, propertyValue?: string): string | void { 42 | if (propertyValue == null) { 43 | return element.clientHeight + "px"; 44 | } 45 | } 46 | 47 | /** 48 | * Get the scrollHeight of an element. 49 | */ 50 | function scrollHeight(element: HTMLorSVGElement): string; 51 | function scrollHeight(element: HTMLorSVGElement, propertyValue: string): void; 52 | function scrollHeight(element: HTMLorSVGElement, propertyValue?: string): string | void { 53 | if (propertyValue == null) { 54 | return element.scrollHeight + "px"; 55 | } 56 | } 57 | 58 | /** 59 | * Scroll an element. 60 | */ 61 | function scroll(direction: "Height", end: "Top"): VelocityNormalizationsFn; 62 | function scroll(direction: "Width", end: "Left"): VelocityNormalizationsFn; 63 | function scroll(direction: "Height" | "Width", end: "Top" | "Left"): VelocityNormalizationsFn { 64 | return ((element: HTMLorSVGElement, propertyValue?: string): string | void => { 65 | if (propertyValue == null) { 66 | // Make sure we have these values cached. 67 | getPropertyValue(element, "client" + direction, null, true); 68 | getPropertyValue(element, "scroll" + direction, null, true); 69 | 70 | return element["scroll" + end] + "px"; 71 | } 72 | const value = parseFloat(propertyValue), 73 | unit = propertyValue.replace(String(value), ""); 74 | 75 | switch (unit) { 76 | case "": 77 | case "px": 78 | element["scroll" + end] = value; 79 | break; 80 | 81 | case "%": 82 | const client = parseFloat(getPropertyValue(element, "client" + direction)), 83 | scrollValue = parseFloat(getPropertyValue(element, "scroll" + direction)); 84 | 85 | element["scroll" + end] = Math.max(0, scrollValue - client) * value / 100; 86 | break; 87 | } 88 | }) as VelocityNormalizationsFn; 89 | } 90 | 91 | registerNormalization(["HTMLElement", "scroll", scroll("Height", "Top"), false]); 92 | registerNormalization(["HTMLElement", "scrollTop", scroll("Height", "Top"), false]); 93 | registerNormalization(["HTMLElement", "scrollLeft", scroll("Width", "Left"), false]); 94 | registerNormalization(["HTMLElement", "scrollWidth", scrollWidth]); 95 | registerNormalization(["HTMLElement", "clientWidth", clientWidth]); 96 | registerNormalization(["HTMLElement", "scrollHeight", scrollHeight]); 97 | registerNormalization(["HTMLElement", "clientHeight", clientHeight]); 98 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/svg/_all.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "./attributes"; 8 | import "./dimensions"; 9 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/svg/attributes.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {VelocityNormalizationsFn} from "../../../../velocity.d"; 9 | 10 | // Project 11 | import {isFunction, isString} from "../../../types"; 12 | import {registerNormalization} from "../normalizations"; 13 | 14 | /** 15 | * Get/set an attribute. 16 | */ 17 | function getAttribute(name: string) { 18 | return ((element: Element, propertyValue?: string): string | void => { 19 | if (propertyValue === undefined) { 20 | return element.getAttribute(name); 21 | } 22 | element.setAttribute(name, propertyValue); 23 | }) as VelocityNormalizationsFn; 24 | } 25 | 26 | const base = document.createElement("div"), 27 | rxSubtype = /^SVG(.*)Element$/, 28 | rxElement = /Element$/; 29 | 30 | Object.getOwnPropertyNames(window) 31 | .forEach((property) => { 32 | const subtype = rxSubtype.exec(property); 33 | 34 | if (subtype && subtype[1] !== "SVG") { // Don't do SVGSVGElement. 35 | try { 36 | const element = subtype[1] ? document.createElementNS("http://www.w3.org/2000/svg", (subtype[1] || "svg").toLowerCase()) : document.createElement("svg"); 37 | 38 | // tslint:disable-next-line:forin 39 | for (const attribute in element) { 40 | // Although this isn't a tween without prototypes, we do 41 | // want to get hold of all attributes and not just own ones. 42 | const value = element[attribute]; 43 | 44 | if (isString(attribute) 45 | && !(attribute[0] === "o" && attribute[1] === "n") 46 | && attribute !== attribute.toUpperCase() 47 | && !rxElement.test(attribute) 48 | && !(attribute in base) 49 | && !isFunction(value)) { 50 | // TODO: Should this all be set on the generic SVGElement, it would save space and time, but not as powerful 51 | registerNormalization([property, attribute, getAttribute(attribute)]); 52 | } 53 | } 54 | } catch (e) { 55 | console.error(`VelocityJS: Error when trying to identify SVG attributes on ${property}.`, e); 56 | } 57 | } 58 | }); 59 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/svg/dimensions.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement, VelocityNormalizationsFn} from "../../../../velocity.d"; 9 | 10 | // Project 11 | import {registerNormalization} from "../normalizations"; 12 | 13 | /** 14 | * Get/set the width or height. 15 | */ 16 | function getDimension(name: string) { 17 | return ((element: HTMLorSVGElement, propertyValue?: string): string | void => { 18 | if (propertyValue === undefined) { 19 | // Firefox throws an error if .getBBox() is called on an SVG that isn't attached to the DOM. 20 | try { 21 | return (element as SVGGraphicsElement).getBBox()[name] + "px"; 22 | } catch (e) { 23 | return "0px"; 24 | } 25 | } 26 | element.setAttribute(name, propertyValue); 27 | }) as VelocityNormalizationsFn; 28 | } 29 | 30 | registerNormalization(["SVGElement", "width", getDimension("width")]); 31 | registerNormalization(["SVGElement", "height", getDimension("height")]); 32 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/svg/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | export * from "./attributes"; 8 | export * from "./dimensions"; 9 | -------------------------------------------------------------------------------- /src/Velocity/normalizations/tween.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement} from "../../../velocity.d"; 9 | 10 | // Project 11 | import {registerNormalization} from "./normalizations"; 12 | 13 | /** 14 | * A fake normalization used to allow the "tween" property easy access. 15 | */ 16 | function getSetTween(element: HTMLorSVGElement, propertyValue?: string) { 17 | if (propertyValue === undefined) { 18 | return ""; 19 | } 20 | } 21 | 22 | registerNormalization(["Element", "tween", getSetTween]); 23 | -------------------------------------------------------------------------------- /src/Velocity/patch.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Project 8 | import {defineProperty} from "../utility"; 9 | import {Velocity} from "../velocityFn"; 10 | 11 | /** 12 | * Used to patch any object to allow Velocity chaining. In order to chain an 13 | * object must either be treatable as an array - with a .length 14 | * property, and each member a Node, or a Node directly. 15 | * 16 | * By default Velocity will try to patch window, 17 | * jQuery, Zepto, and several classes that return 18 | * Nodes or lists of Nodes. 19 | */ 20 | export function patch(proto: any, global?: boolean) { 21 | try { 22 | defineProperty(proto, (global ? "V" : "v") + "elocity", Velocity); 23 | } catch (e) { 24 | console.warn(`VelocityJS: Error when trying to add prototype.`, e); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/Velocity/sequencesObject.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {SequenceList} from "../../velocity.d"; 9 | 10 | export const SequencesObject: {[name: string]: SequenceList} = {}; 11 | -------------------------------------------------------------------------------- /src/Velocity/state.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {VelocityState} from "../../velocity.d"; 9 | 10 | // Constants 11 | import {CLASSNAME} from "../constants"; 12 | 13 | const isClient = window && window === window.window, 14 | windowScrollAnchor = isClient && window.pageYOffset !== undefined; 15 | 16 | export const State: VelocityState = { 17 | isClient, 18 | isMobile: isClient && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), 19 | isGingerbread: isClient && /Android 2\.3\.[3-7]/i.test(navigator.userAgent), 20 | prefixElement: isClient && document.createElement("div"), 21 | windowScrollAnchor, 22 | scrollAnchor: windowScrollAnchor ? window : (!isClient || document.documentElement || document.body.parentNode || document.body), 23 | scrollPropertyLeft: windowScrollAnchor ? "pageXOffset" : "scrollLeft", 24 | scrollPropertyTop: windowScrollAnchor ? "pageYOffset" : "scrollTop", 25 | className: CLASSNAME, 26 | isTicking: false, 27 | first: undefined, 28 | last: undefined, 29 | firstNew: undefined, 30 | }; 31 | -------------------------------------------------------------------------------- /src/constants.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Constants and defaults. These values should never change without a MINOR 7 | * version bump. 8 | */ 9 | 10 | /** 11 | * Without this it will only un-prefix properties that have a valid "normal" 12 | * version. 13 | */ 14 | export const ALL_VENDOR_PREFIXES = true; 15 | 16 | export const DURATION_FAST = 200; 17 | export const DURATION_NORMAL = 400; 18 | export const DURATION_SLOW = 600; 19 | 20 | export const FUZZY_MS_PER_SECOND = 980; 21 | 22 | export const DEFAULT_CACHE = true; 23 | export const DEFAULT_DELAY = 0; 24 | export const DEFAULT_DURATION = DURATION_NORMAL; 25 | export const DEFAULT_EASING = "swing"; 26 | export const DEFAULT_FPSLIMIT = 60; 27 | export const DEFAULT_LOOP = 0; 28 | export const DEFAULT_PROMISE = true; 29 | export const DEFAULT_PROMISE_REJECT_EMPTY = true; 30 | export const DEFAULT_QUEUE = ""; 31 | export const DEFAULT_REPEAT = 0; 32 | export const DEFAULT_SPEED = 1; 33 | export const DEFAULT_SYNC = true; 34 | 35 | export const CLASSNAME = "velocity-animating"; 36 | 37 | export const Duration = { 38 | fast: DURATION_FAST, 39 | normal: DURATION_NORMAL, 40 | slow: DURATION_SLOW, 41 | }; 42 | -------------------------------------------------------------------------------- /src/fakeClass.js: -------------------------------------------------------------------------------- 1 | var __extends = (this && this.__extends) || (function () { 2 | var extendStatics = function (d, b) { 3 | extendStatics = Object.setPrototypeOf || 4 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 5 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 6 | return extendStatics(d, b); 7 | }; 8 | return function (d, b) { 9 | extendStatics(d, b); 10 | function __() { this.constructor = d; } 11 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 12 | }; 13 | })(); 14 | var __spreadArrays = (this && this.__spreadArrays) || function () { 15 | for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 16 | for (var r = Array(s), k = 0, i = 0; i < il; i++) 17 | for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) 18 | r[k] = a[j]; 19 | return r; 20 | }; 21 | function nn(C) { 22 | return new Proxy(C, { 23 | apply: function (t, _, a) { 24 | var _a; 25 | return new ((_a = t).bind.apply(_a, __spreadArrays([void 0], a)))(); 26 | } 27 | }); 28 | } 29 | var $A = /** @class */ (function () { 30 | function $A() { 31 | this.x = 10; 32 | // console.log('XXX', (this.constructor as any as $c).$c == $A.$c) 33 | // console.log('YYY', this.constructor == $A); 34 | // this.constructor = (this.constructor as any as $c).$c || this.constructor; 35 | // Object.defineProperty(this, 'constructor', { value: (this.constructor as any as $c).$c || this.constructor }); 36 | Object.defineProperty(this, 'constructor', { value: this.constructor.$c }); 37 | } 38 | $A.prototype.a = function () { 39 | return this.x += 1; 40 | }; 41 | $A.$c = A; 42 | return $A; 43 | }()); 44 | var A = nn($A); 45 | $A.$c = A; 46 | Object.defineProperty(A, 'name', { value: 'A' }); 47 | var $B = /** @class */ (function (_super) { 48 | __extends($B, _super); 49 | function $B() { 50 | return _super !== null && _super.apply(this, arguments) || this; 51 | } 52 | $B.prototype.a = function () { 53 | return this.x += 2; 54 | }; 55 | $B.$c = B; 56 | return $B; 57 | }($A)); 58 | var B = nn($B); 59 | $B.$c = B; 60 | Object.defineProperty(B, 'name', { value: 'B' }); 61 | var o = { 62 | 'new A()': new A(), 63 | 'A()': A(), 64 | 'new B()': new B(), 65 | 'B()': B() 66 | }; 67 | console.log('$A.name:', $A.name); 68 | console.log('A.name:', A.name); 69 | console.log('$B.name:', $B.name); 70 | console.log('B.name:', B.name); 71 | for (var k in o) { 72 | var x = o[k]; 73 | console.log("---\nx = " + k); 74 | console.log('console.log(x): ', x); 75 | console.log('x instanceof A: ', x instanceof A); 76 | console.log('x instanceof $A: ', x instanceof $A); 77 | console.log('x instanceof B: ', x instanceof B); 78 | console.log('x instanceof $B: ', x instanceof $B); 79 | console.log('x instanceof Proxy: ', x instanceof Proxy); 80 | console.log('x.constructor.name: ', x.constructor.name); 81 | console.log('x.constructor == A: ', x.constructor == A); 82 | console.log('x.constructor == $A: ', x.constructor == $A); 83 | console.log('x.constructor == B: ', x.constructor == B); 84 | console.log('x.constructor == $B: ', x.constructor == $B); 85 | console.log('x.hasOwnProperty(\'constructor\'): ', x.hasOwnProperty('constructor')); 86 | console.log('x.propertyIsEnumerable(\'constructor\'): ', x.propertyIsEnumerable('constructor')); 87 | console.log('x.a():', x.a()); 88 | console.log('x.a():', x.a()); 89 | console.log('x.a():', x.a()); 90 | } 91 | -------------------------------------------------------------------------------- /src/fakeClass.ts: -------------------------------------------------------------------------------- 1 | // rsp: 2 | type NC = { new(): X }; 3 | type FC = { (): X }; 4 | type MC = NC & FC; 5 | function nn(C: NC): MC { 6 | return new Proxy(C, { 7 | apply: (t, _, a) => new (t)(...a) 8 | }) as MC; 9 | } 10 | 11 | type $c = { $c: Function }; 12 | 13 | class $A { 14 | static $c = A; 15 | x: number; 16 | constructor() { 17 | this.x = 10; 18 | // console.log('XXX', (this.constructor as any as $c).$c == $A.$c) 19 | // console.log('YYY', this.constructor == $A); 20 | // this.constructor = (this.constructor as any as $c).$c || this.constructor; 21 | // Object.defineProperty(this, 'constructor', { value: (this.constructor as any as $c).$c || this.constructor }); 22 | Object.defineProperty(this, 'constructor', { value: (this.constructor as any as $c).$c }); 23 | } 24 | a() { 25 | return this.x += 1; 26 | } 27 | } 28 | type A = $A; 29 | var A: MC = nn($A); 30 | $A.$c = A; 31 | Object.defineProperty(A, 'name', { value: 'A' }); 32 | 33 | class $B extends $A { 34 | static $c = B; 35 | a() { 36 | return this.x += 2; 37 | } 38 | } 39 | type B = $B; 40 | var B: MC = nn($B); 41 | $B.$c = B; 42 | Object.defineProperty(B, 'name', { value: 'B' }); 43 | 44 | const o: { [s: string]: A } = { 45 | 'new A()': new A(), 46 | 'A()': A(), 47 | 'new B()': new B(), 48 | 'B()': B(), 49 | }; 50 | 51 | console.log('$A.name:', $A.name); 52 | console.log('A.name:', A.name); 53 | console.log('$B.name:', $B.name); 54 | console.log('B.name:', B.name); 55 | 56 | for (let k in o) { 57 | const x: A = o[k]; 58 | console.log(`---\nx = ${k}`); 59 | console.log('console.log(x): ', x); 60 | console.log('x instanceof A: ', x instanceof A); 61 | console.log('x instanceof $A: ', x instanceof $A); 62 | console.log('x instanceof B: ', x instanceof B); 63 | console.log('x instanceof $B: ', x instanceof $B); 64 | console.log('x instanceof Proxy: ', x instanceof Proxy); 65 | console.log('x.constructor.name: ', x.constructor.name); 66 | console.log('x.constructor == A: ', x.constructor == A); 67 | console.log('x.constructor == $A: ', x.constructor == $A); 68 | console.log('x.constructor == B: ', x.constructor == B); 69 | console.log('x.constructor == $B: ', x.constructor == $B); 70 | console.log('x.hasOwnProperty(\'constructor\'): ', x.hasOwnProperty('constructor')); 71 | console.log('x.propertyIsEnumerable(\'constructor\'): ', x.propertyIsEnumerable('constructor')); 72 | console.log('x.a():', x.a()); 73 | console.log('x.a():', x.a()); 74 | console.log('x.a():', x.a()); 75 | } 76 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "files": [ 4 | "velocity.ts" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | * 6 | * Runtime type checking methods. 7 | */ 8 | 9 | // Typedefs 10 | import {HTMLorSVGElement, VelocityResult} from "./../velocity.d"; 11 | 12 | /** 13 | * Check if a variable is a boolean. 14 | */ 15 | export function isBoolean(variable: any): variable is boolean { 16 | return variable === true || variable === false; 17 | } 18 | 19 | /** 20 | * Check if a variable is an empty object. 21 | */ 22 | export function isEmptyObject(variable: {}): variable is {} { 23 | for (const name in variable) { 24 | if (variable.hasOwnProperty(name)) { 25 | return false; 26 | } 27 | } 28 | 29 | return true; 30 | } 31 | 32 | /** 33 | * Check if a variable is a function. 34 | */ 35 | export function isFunction(variable: any): variable is Function { // tslint:disable-line:ban-types 36 | return Object.prototype.toString.call(variable) === "[object Function]"; 37 | } 38 | 39 | /** 40 | * Check if a variable is an HTMLElement or SVGElement. 41 | */ 42 | export function isNode(variable: any): variable is HTMLorSVGElement { 43 | return !!(variable && (variable as Element).nodeType); 44 | } 45 | 46 | /** 47 | * Check if a variable is a number. 48 | */ 49 | export function isNumber(variable: any): variable is number { 50 | return typeof variable === "number"; 51 | } 52 | 53 | /** 54 | * Faster way to parse a string/number as a number https://jsperf.com/number-vs-parseint-vs-plus/3 55 | */ 56 | export function isNumberWhenParsed(variable: any): variable is number { 57 | return !isNaN(Number(variable)); 58 | } 59 | 60 | /** 61 | * Check if a variable is a plain object (and not an instance). 62 | */ 63 | export function isPlainObject(variable: any): variable is {} { 64 | if (!variable || typeof variable !== "object" || (variable as Element).nodeType || Object.prototype.toString.call(variable) !== "[object Object]") { 65 | return false; 66 | } 67 | const proto = Object.getPrototypeOf(variable) as object; 68 | 69 | return !proto || (proto.hasOwnProperty("constructor") && proto.constructor === Object); 70 | } 71 | 72 | /** 73 | * Check if a variable is an SVGElement. 74 | */ 75 | export function isSVG(variable: any): variable is SVGElement { 76 | return SVGElement && variable instanceof SVGElement; 77 | } 78 | 79 | /** 80 | * Check if a variable is a string. 81 | */ 82 | export function isString(variable: any): variable is string { 83 | return typeof variable === "string"; 84 | } 85 | 86 | /** 87 | * Check if a variable is the result of calling Velocity. 88 | */ 89 | export function isVelocityResult(variable: any): variable is VelocityResult { 90 | return variable && isNumber((variable as VelocityResult).length) && isFunction((variable as VelocityResult).velocity); 91 | } 92 | 93 | /** 94 | * Check if a variable is an array-like wrapped jQuery, Zepto or similar, where 95 | * each indexed value is a Node. 96 | */ 97 | 98 | export function isWrapped(variable: any): variable is HTMLorSVGElement[] { 99 | return variable 100 | && variable !== window 101 | && isNumber((variable as HTMLorSVGElement[]).length) 102 | && !isString(variable) 103 | && !isFunction(variable) 104 | && !isNode(variable) 105 | && ((variable as HTMLorSVGElement[]).length === 0 || isNode(variable[0])); 106 | } 107 | 108 | /** 109 | * Check is a property is an enumerable member of an object. 110 | */ 111 | export function propertyIsEnumerable(obj: object, property: string): boolean { 112 | return Object.prototype.propertyIsEnumerable.call(obj, property); 113 | } 114 | -------------------------------------------------------------------------------- /src/utility.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Typedefs 8 | import {HTMLorSVGElement} from "./../velocity.d"; 9 | 10 | // Project 11 | import {isNode} from "./types"; 12 | 13 | /** 14 | * Add a single className to an Element. 15 | */ 16 | export function addClass(element: HTMLorSVGElement, className: string): void { 17 | if (element instanceof Element) { 18 | if (element.classList) { 19 | element.classList.add(className); 20 | } else { 21 | removeClass(element, className); 22 | (element as any).className += (element.className.length ? " " : "") + className; 23 | } 24 | } 25 | } 26 | 27 | /** 28 | * Clone an array, works for array-like too. 29 | */ 30 | export function cloneArray(arrayLike: T[] | ArrayLike): T[] { 31 | return Array.prototype.slice.call(arrayLike, 0); 32 | } 33 | 34 | /** 35 | * The defineProperty() function provides a 36 | * shortcut to defining a property that cannot be accidentally iterated across. 37 | */ 38 | export function defineProperty(proto: any, name: string, value: any, readonly?: boolean) { 39 | if (proto) { 40 | Object.defineProperty(proto, name, { 41 | configurable: !readonly, 42 | writable: !readonly, 43 | value, 44 | }); 45 | } 46 | } 47 | 48 | /** 49 | * When there are multiple locations for a value pass them all in, then get the 50 | * first value that is valid. 51 | */ 52 | export function getValue(...args: T[]): T { 53 | for (const arg of args) { 54 | if (arg !== undefined && arg === arg) { 55 | return arg; 56 | } 57 | } 58 | } 59 | 60 | /** 61 | * Shim to get the current milliseconds - on anything except old IE it'll use 62 | * Date.now() and save creating an object. If that doesn't exist then it'll 63 | * create one that gets GC. 64 | */ 65 | export const now = Date.now ? Date.now : () => { 66 | return (new Date()).getTime(); 67 | }; 68 | 69 | /** 70 | * Remove a single className from an Element. 71 | */ 72 | export function removeClass(element: HTMLorSVGElement, className: string): void { 73 | if (element instanceof Element) { 74 | if (element.classList) { 75 | element.classList.remove(className); 76 | } else { 77 | // TODO: Need some jsperf tests on performance - can we get rid of the regex and maybe use split / array manipulation? 78 | (element as any).className = element.className.replace(new RegExp(`(^|\\s)${className}(\\s|$)`, "gi"), " "); 79 | } 80 | } 81 | } 82 | 83 | /** 84 | * Convert an element or array-like element list into an array if needed. 85 | */ 86 | export function sanitizeElements(elements: HTMLorSVGElement | HTMLorSVGElement[]): HTMLorSVGElement[] { 87 | return isNode(elements) 88 | ? [elements] as HTMLorSVGElement[] 89 | : elements as HTMLorSVGElement[]; 90 | } 91 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Velocity.js Tests 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 33 | 34 | 35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /test/src/1_Core/End Value Caching.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {Data, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("End Value Caching", (assert) => { 14 | const done = assert.async(2), 15 | newProperties = {height: "50px", width: "250px"}; 16 | 17 | assert.expect(4); 18 | 19 | /* Called after the last call is complete (stale). Ensure that the newly-set (via $.css()) properties are used. */ 20 | Velocity(getTarget(newProperties), defaultProperties) 21 | .then((elements) => { 22 | assert.equal(Data(elements[0]).cache.width, defaultProperties.width, "Stale end value #1 wasn't pulled."); 23 | assert.equal(Data(elements[0]).cache.height, defaultProperties.height, "Stale end value #2 wasn't pulled."); 24 | 25 | done(); 26 | }); 27 | 28 | Velocity(getTarget(), defaultProperties) 29 | .velocity(newProperties) 30 | .then((elements) => { 31 | /* Chained onto a previous call (fresh). */ 32 | assert.equal(Data(elements[0]).cache.width, newProperties.width, "Chained end value #1 was pulled."); 33 | assert.equal(Data(elements[0]).cache.height, newProperties.height, "Chained end value #2 was pulled."); 34 | 35 | done(); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /test/src/1_Core/End Value Setting.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {Data, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("End Value Setting", (assert) => { 14 | const done = assert.async(1); 15 | 16 | /* Standard properties. */ 17 | Velocity(getTarget(), defaultProperties) 18 | .then((elements) => { 19 | assert.equal(Velocity(elements[0], "style", "width"), defaultProperties.width, "Standard end value #1 was set."); 20 | assert.equal(Velocity(elements[0], "style", "opacity"), defaultProperties.opacity, "Standard end value #2 was set."); 21 | 22 | done(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /test/src/1_Core/Unit Calculation.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, getPropertyValue, getTarget, sleep} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Unit Calculation", (assert) => { 14 | // TODO: Add code and tests for operators - probably using calc() internally 15 | // /* Standard properties with operators. */ 16 | // var testIncrementWidth = "5px", 17 | // testDecrementOpacity = 0.25, 18 | // testMultiplyMarginBottom = 4, 19 | // testDivideHeight = 2; 20 | // 21 | // var $target2 = getTarget(); 22 | // Velocity($target2, {width: "+=" + testIncrementWidth, opacity: "-=" + testDecrementOpacity, marginBottom: "*=" + testMultiplyMarginBottom, height: "/=" + testDivideHeight}); 23 | // setTimeout(function() { 24 | // 25 | // assert.equal(Data($target2).style.width.endValue, defaultStyles.width + parseFloat(testIncrementWidth), "Incremented end value was calculated."); 26 | // assert.equal(Data($target2).style.opacity.endValue, defaultStyles.opacity - testDecrementOpacity, "Decremented end value was calculated."); 27 | // assert.equal(Data($target2).style.marginBottom.endValue, defaultStyles.marginBottom * testMultiplyMarginBottom, "Multiplied end value was calculated."); 28 | // assert.equal(Data($target2).style.height.endValue, defaultStyles.height / testDivideHeight, "Divided end value was calculated."); 29 | // 30 | // done(); 31 | // }, asyncCheckDuration); 32 | 33 | asyncTests(assert, 2, async (done) => { 34 | const $target = getTarget(); 35 | 36 | Velocity($target, {left: "500px"}, {duration: 10}); 37 | await sleep(100); 38 | assert.equal(getPropertyValue($target, "left"), "500px", "Finished animated value with given pixels should be the same."); 39 | Velocity($target, {left: "0px"}, {duration: 10}); 40 | await sleep(100); 41 | assert.equal(getPropertyValue($target, "left"), "0px", "Finished animated value with 0px should be the same."); 42 | 43 | done(); 44 | }); 45 | 46 | // async(assert, 1, async (done) => { 47 | // const $target = getTarget(); 48 | // 49 | // Velocity($target, {left: "500px"}, {duration: 10}); 50 | // await sleep(100); 51 | // Velocity($target, {left: "0"}, {duration: 10}); 52 | // await sleep(100); 53 | // assert.equal(getPropertyValue($target, "left"), "0px", "Finished animated value without giving px, but only number as a string should be the same."); 54 | // 55 | // done(); 56 | // }); 57 | 58 | asyncTests(assert, 1, async (done) => { 59 | const $target = getTarget(); 60 | 61 | Velocity($target, {left: "500px"}, {duration: 10}); 62 | await sleep(100); 63 | Velocity($target, {left: 0}, {duration: 10}); 64 | await sleep(1000); 65 | assert.equal(getPropertyValue($target, "left"), "0px", "Finished animated value given as number 0 should be the same as 0px."); 66 | 67 | done(); 68 | }); 69 | 70 | asyncTests(assert, 2, async (done) => { 71 | const $target = getTarget(); 72 | 73 | Velocity($target, {left: 500}, {duration: 10}); 74 | await sleep(100); 75 | assert.equal(getPropertyValue($target, "left"), "500px", "Finished animated value with given pixels should be the same."); 76 | Velocity($target, {left: 0}, {duration: 10}); 77 | await sleep(100); 78 | assert.equal(getPropertyValue($target, "left"), "0px", "Omitted pixels (px) when given animation should run properly."); 79 | 80 | done(); 81 | }); 82 | }); 83 | -------------------------------------------------------------------------------- /test/src/1_Core/_module.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | QUnit.module("Core"); 10 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Begin.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncCheckDuration, asyncTests, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Begin", (assert) => { 14 | asyncTests(assert, 1, (done) => { 15 | const $targetSet = [getTarget(), getTarget()]; 16 | 17 | Velocity($targetSet, defaultProperties, { 18 | duration: asyncCheckDuration, 19 | begin(elements) { 20 | assert.deepEqual(elements, $targetSet, "Elements passed into callback."); 21 | 22 | done(); 23 | }, 24 | }); 25 | }); 26 | 27 | assert.expect(asyncTests()); 28 | }); 29 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Complete.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncCheckDuration, asyncTests, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Complete", (assert) => { 14 | asyncTests(assert, 1, (done) => { 15 | const $targetSet = [getTarget(), getTarget()]; 16 | 17 | Velocity($targetSet, defaultProperties, { 18 | duration: asyncCheckDuration, 19 | complete(elements) { 20 | assert.deepEqual(elements, $targetSet, "Elements passed into callback."); 21 | 22 | done(); 23 | }, 24 | }); 25 | }); 26 | 27 | assert.expect(asyncTests()); 28 | }); 29 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Delay.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, defaultOptions, defaultProperties, getNow, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Delay", (assert) => { 14 | const testDelay = 250; 15 | 16 | asyncTests(assert, 1, (done) => { 17 | const start = getNow(); 18 | 19 | Velocity(getTarget(), defaultProperties, { 20 | duration: defaultOptions.duration, 21 | delay: testDelay, 22 | begin(elements, activeCall) { 23 | assert.close(getNow() - start, testDelay, 32, "Delayed calls start after the correct delay."); 24 | 25 | done(); 26 | }, 27 | }); 28 | }); 29 | 30 | asyncTests(assert, 1, (done) => { 31 | const start = getNow(); 32 | 33 | Velocity(getTarget(), defaultProperties, { 34 | duration: defaultOptions.duration, 35 | delay: testDelay, 36 | }) 37 | .velocity(defaultProperties, { 38 | duration: defaultOptions.duration, 39 | delay: testDelay, 40 | begin(elements, activeCall) { 41 | assert.close(getNow() - start, (testDelay * 2) + (defaultOptions.duration as number), 32, "Chained delays start after the correct delay."); 42 | 43 | done(); 44 | }, 45 | }); 46 | }); 47 | 48 | assert.expect(asyncTests()); 49 | }); 50 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Duration.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, defaultOptions, defaultProperties, getNow, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Duration", (assert) => { 14 | const testDuration = Velocity.defaults.duration as number; 15 | 16 | asyncTests(assert, 1, (done) => { 17 | const start = getNow(); 18 | 19 | Velocity(getTarget(), defaultProperties, { 20 | duration: testDuration, 21 | complete(elements, activeCall) { 22 | const time = getNow() - start; 23 | 24 | assert.close(time, testDuration, 32, `Calls run for the correct duration (~${Math.floor(time)}ms / ${testDuration}ms).`); 25 | 26 | done(); 27 | }, 28 | }); 29 | }); 30 | 31 | asyncTests(assert, 1, (done) => { 32 | const start = getNow(); 33 | 34 | Velocity(getTarget(), {width: ["200px", "500px"]}, { 35 | duration: testDuration, 36 | }) 37 | .velocity({width: ["500px", "200px"]}, { 38 | duration: testDuration, 39 | complete(elements, activeCall) { 40 | const time = getNow() - start; 41 | 42 | assert.close(getNow() - start, testDuration * 2, 32, `Chained durations run for the correct duration (~${Math.floor(time)}ms / ${testDuration * 2}ms).`); 43 | 44 | done(); 45 | }, 46 | }); 47 | }); 48 | 49 | asyncTests(assert, 1, (done) => { 50 | const start = getNow(); 51 | 52 | Velocity(getTarget(), {width: ["200px", "500px"]}) 53 | .velocity({width: ["500px", "200px"]}) 54 | .then(() => { 55 | const time = getNow() - start; 56 | 57 | assert.close(getNow() - start, testDuration * 2, 32, `Chained durations with defaults run for the correct duration (~${Math.floor(time)}ms / ${testDuration * 2}ms).`); 58 | 59 | done(); 60 | }); 61 | }); 62 | 63 | assert.expect(asyncTests()); 64 | }); 65 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Fps Limit.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("FPS Limit", async (assert) => { 14 | let count: number; 15 | const $target = getTarget(), 16 | frameRates = [5, 15, 30, 60], 17 | testFrame = (frameRate) => { 18 | let counter = 0; 19 | 20 | Velocity.defaults.fpsLimit = frameRate; 21 | // Test if the frame rate is assigned succesfully. 22 | assert.equal(frameRate, Velocity.defaults.fpsLimit, "Setting global fps limit to " + frameRate); 23 | 24 | return Velocity($target, defaultProperties, 25 | { 26 | duration: 1000, 27 | progress() { 28 | counter++; 29 | }, 30 | }) 31 | .then(() => counter); 32 | }; 33 | 34 | assert.expect(frameRates.length * 2); 35 | // Test if the limit is working for 60, 30, 15 and 5 fps. 36 | for (const frameRate of frameRates) { 37 | assert.ok((count = await testFrame(frameRate)) <= frameRate + 1, `...counted ${count} frames (\xB11 frame)`); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Loop.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, defaultProperties, getNow, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Loop", (assert) => { 14 | asyncTests(assert, 4, (done) => { 15 | const testOptions = {loop: 2, delay: 100, duration: 100}, 16 | start = getNow(); 17 | let begin = 0, 18 | complete = 0, 19 | loop = 0, 20 | lastPercentComplete = 2; 21 | 22 | Velocity(getTarget(), defaultProperties, 23 | { 24 | loop: testOptions.loop, 25 | delay: testOptions.delay, 26 | duration: testOptions.duration, 27 | begin() { 28 | begin++; 29 | }, 30 | progress(elements, percentComplete) { 31 | if (lastPercentComplete > percentComplete) { 32 | loop++; 33 | } 34 | lastPercentComplete = percentComplete; 35 | }, 36 | complete() { 37 | complete++; 38 | }, 39 | }) 40 | .then(() => { 41 | assert.equal(begin, 1, "Begin callback only called once."); 42 | assert.equal(loop, testOptions.loop * 2 - 1, "Animation looped correct number of times (once each direction per loop)."); 43 | assert.close(getNow() - start, (testOptions.delay + testOptions.duration) * loop, 32, "Looping with 'delay' has correct duration."); 44 | assert.equal(complete, 1, "Complete callback only called once."); 45 | 46 | done(); 47 | }); 48 | }); 49 | 50 | assert.expect(asyncTests()); 51 | }); 52 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Progress.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncCheckDuration, asyncTests, defaultProperties, getTarget, once} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Progress", (assert) => { 14 | asyncTests(assert, 4, (done) => { 15 | const $target = getTarget(); 16 | 17 | Velocity($target, defaultProperties, { 18 | duration: asyncCheckDuration, 19 | progress: once(function(elements, percentComplete, msRemaining) { // tslint:disable-line:only-arrow-functions 20 | assert.deepEqual(elements, [$target], "Elements passed into progress."); 21 | assert.deepEqual(this, [$target], "Elements passed into progress as this."); // tslint:disable-line:no-invalid-this 22 | assert.equal(percentComplete >= 0 && percentComplete <= 1, true, "'percentComplete' passed into progress."); 23 | assert.equal(msRemaining > asyncCheckDuration - 50, true, "'msRemaining' passed into progress."); 24 | 25 | done(); 26 | }), 27 | }); 28 | }); 29 | 30 | assert.expect(asyncTests()); 31 | }); 32 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Queue.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {Data, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Queue", (assert) => { 14 | const done = assert.async(4), 15 | testQueue = "custom", 16 | $target = getTarget(), 17 | ignore = $target.velocity("style", "display"), // Force data creation 18 | data = Data($target); 19 | let anim1: boolean, 20 | anim2: boolean, 21 | anim3: boolean; 22 | 23 | assert.expect(7); 24 | 25 | assert.ok(data.queueList[testQueue] === undefined, "Custom queue is empty."); // Shouldn't exist 26 | 27 | $target.velocity(defaultProperties, { 28 | queue: testQueue, 29 | begin() { 30 | anim1 = true; 31 | }, 32 | complete() { 33 | anim1 = false; 34 | assert.ok(!anim2, "Queued animation isn't started early."); 35 | 36 | done(); 37 | }, 38 | }); 39 | assert.ok(data.queueList[testQueue] !== undefined, "Custom queue was created."); // Should exist, but be "null" 40 | 41 | $target.velocity(defaultProperties, { 42 | queue: testQueue, 43 | begin() { 44 | anim2 = true; 45 | assert.ok(anim1 === false, "Queued animation starts after first."); 46 | 47 | done(); 48 | }, 49 | complete() { 50 | anim2 = false; 51 | }, 52 | }); 53 | assert.ok(data.queueList[testQueue], "Custom queue grows."); // Should exist and point at the next animation 54 | 55 | $target.velocity(defaultProperties, { 56 | begin() { 57 | anim3 = true; 58 | assert.ok(anim1 === true, "Different queue animation starts in parallel."); 59 | 60 | done(); 61 | }, 62 | complete() { 63 | anim3 = false; 64 | }, 65 | }); 66 | 67 | $target.velocity(defaultProperties, { 68 | queue: false, 69 | begin() { 70 | assert.ok(anim1 === true, "Queue:false animation starts in parallel."); 71 | 72 | done(); 73 | }, 74 | }); 75 | }); 76 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Repeat.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Repeat", (assert) => { 14 | asyncTests(assert, 4, (done) => { 15 | const testOptions = {repeat: 2, delay: 100, duration: 100}, 16 | start = Date.now(); 17 | let begin = 0, 18 | complete = 0, 19 | repeat = 0; 20 | 21 | Velocity(getTarget(), defaultProperties, { 22 | repeat: testOptions.repeat, 23 | delay: testOptions.delay, 24 | duration: testOptions.duration, 25 | begin() { 26 | begin++; 27 | }, 28 | progress(elements, percentComplete) { 29 | if (percentComplete === 1) { 30 | repeat++; 31 | } 32 | }, 33 | complete() { 34 | complete++; 35 | assert.equal(begin, 1, "Begin callback only called once."); 36 | assert.equal(repeat, testOptions.repeat + 1, "Animation repeated correct number of times (original plus repeats)."); 37 | assert.close(Date.now() - start, (testOptions.delay + testOptions.duration) * (testOptions.repeat + 1), (testOptions.repeat + 1) * 16 + 32, 38 | "Repeat with 'delay' has correct duration."); 39 | assert.equal(complete, 1, "Complete callback only called once."); 40 | 41 | done(); 42 | }, 43 | }); 44 | }); 45 | 46 | assert.expect(asyncTests()); 47 | }); 48 | -------------------------------------------------------------------------------- /test/src/2_Option/Option Sync.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, defaultProperties, getTarget, sleep} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Sync", (assert) => { 14 | asyncTests(assert, 1, async (done) => { 15 | const $target = getTarget(), 16 | $targetSet = [getTarget(), $target, getTarget()]; 17 | let complete = false; 18 | 19 | Velocity($target, defaultProperties, { 20 | duration: 300, 21 | complete() { 22 | complete = true; 23 | }, 24 | }); 25 | Velocity($targetSet, defaultProperties, { 26 | sync: false, 27 | duration: 250, 28 | }); 29 | await sleep(275); 30 | assert.notOk(complete, "Sync 'false' animations don't wait for completion."); 31 | 32 | done(); 33 | }); 34 | 35 | asyncTests(assert, 1, async (done) => { 36 | const $target = getTarget(), 37 | $targetSet = [getTarget(), $target, getTarget()]; 38 | let complete = false; 39 | 40 | Velocity($target, defaultProperties, { 41 | duration: 300, 42 | complete() { 43 | complete = true; 44 | }, 45 | }); 46 | Velocity($targetSet, defaultProperties, { 47 | sync: true, 48 | duration: 250, 49 | begin() { 50 | assert.ok(complete, "Sync 'true' animations wait for completion."); 51 | 52 | done(); 53 | }, 54 | }); 55 | }); 56 | 57 | assert.expect(asyncTests()); 58 | }); 59 | -------------------------------------------------------------------------------- /test/src/2_Option/_module.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | QUnit.module("Option"); 10 | -------------------------------------------------------------------------------- /test/src/3_Command/Command Reverse.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncTests, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Reverse", (assert) => { 14 | const $target = getTarget(), 15 | opacity = $target.velocity("style", "opacity"), 16 | // Browsers don't always suffix, but Velocity does. 17 | width = $target.velocity("style", "width") === "0" ? "0px" : $target.velocity("style", "width"); 18 | 19 | asyncTests(assert, 2, (done) => { 20 | Velocity($target, defaultProperties, { 21 | complete(elements) { 22 | assert.equal(elements[0].velocity("style", "opacity"), defaultProperties.opacity, `Initial property #1 set correctly. (${defaultProperties.opacity})`); 23 | assert.equal(elements[0].velocity("style", "width"), defaultProperties.width, `Initial property #2 set correctly. (${defaultProperties.width})`); 24 | 25 | done(); 26 | }, 27 | }); 28 | }); 29 | 30 | asyncTests(assert, 2, (done) => { 31 | Velocity($target, "reverse", { 32 | complete(elements) { 33 | assert.equal(elements[0].velocity("style", "opacity"), opacity, `Reversed property #1 set correctly. (${opacity})`); 34 | assert.equal(elements[0].velocity("style", "width"), width, `Reversed property #2 set correctly. (${width})`); 35 | 36 | done(); 37 | }, 38 | }); 39 | }); 40 | 41 | asyncTests(assert, 2, (done) => { 42 | Velocity($target, "reverse", { 43 | complete(elements) { 44 | assert.equal(elements[0].velocity("style", "opacity"), defaultProperties.opacity, `Chained reversed property #1 set correctly. (${defaultProperties.opacity})`); 45 | assert.equal(elements[0].velocity("style", "width"), defaultProperties.width, `Chained reversed property #2 set correctly. (${defaultProperties.width})`); 46 | 47 | done(); 48 | }, 49 | }); 50 | }); 51 | 52 | assert.expect(asyncTests()); 53 | }); 54 | -------------------------------------------------------------------------------- /test/src/3_Command/Command Tween.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Tween", (assert) => { 14 | const $target1 = getTarget(), 15 | startOpacity = $target1.style.opacity; 16 | 17 | assert.expect(11); 18 | 19 | assert.raises(() => (Velocity as any)("tween", "invalid"), "Invalid percentComplete throws an error."); 20 | assert.raises(() => (Velocity as any)([$target1, $target1], "tween", "invalid"), "Passing more than one target throws an error."); 21 | assert.raises(() => (Velocity as any)("tween", 0, ["invalid"]), "Invalid propertyMap throws an error."); 22 | assert.raises(() => (Velocity as any)("tween", 0, "invalid", 1), "Property without an element must be forcefed or throw an error."); 23 | 24 | assert.equal($target1.velocity("tween", 0.5, "opacity", [1, 0], "linear"), "0.5", "Calling on an chain returns the correct value."); 25 | assert.equal(Velocity($target1, "tween", 0.5, "opacity", [1, 0], "linear"), "0.5", "Calling with an element returns the correct value."); 26 | assert.equal(Velocity("tween", 0.5, "opacity", [1, 0], "linear"), "0.5", "Calling without an element returns the correct value."); 27 | assert.equal($target1.style.opacity, startOpacity, "Ensure that the element is not altered."); 28 | 29 | assert.equal(typeof Velocity($target1, "tween", 0.5, "opacity", [1, 0], "linear"), "string", "Calling a single property returns a value."); 30 | assert.equal(typeof Velocity($target1, "tween", 0.5, {opacity: [1, 0]}, "linear"), "object", "Calling a propertiesMap returns an object."); 31 | assert.deepEqual($target1.velocity("tween", 0.5, {opacity: [1, 0]}, "linear"), Velocity($target1, "tween", 0.5, {opacity: [1, 0]}, "linear"), 32 | "Calling directly returns the same as a chain."); 33 | }); 34 | -------------------------------------------------------------------------------- /test/src/3_Command/_module.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | QUnit.module("Command"); 10 | -------------------------------------------------------------------------------- /test/src/4_Feature/Feature Classname.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("'velocity-animating' Classname", (assert) => { 14 | const done = assert.async(1); 15 | 16 | Velocity(getTarget(), defaultProperties, { 17 | begin(elements) { 18 | assert.equal(/velocity-animating/.test(elements[0].className), true, "Class added."); 19 | }, 20 | complete(elements) { 21 | assert.equal(/velocity-animating/.test(elements[0].className), false, "Class removed."); 22 | }, 23 | }) 24 | .then(done); 25 | }); 26 | -------------------------------------------------------------------------------- /test/src/4_Feature/Feature Colors.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("Colors (Shorthands)", (assert) => { 14 | const $target = getTarget(); 15 | 16 | Velocity($target, {borderColor: "#7871c2", color: ["#297dad", "spring", "#5ead29"]}); 17 | 18 | // assert.equal(Data($target).style.borderColorRed.endValue, 120, "Hex #1a component."); 19 | // assert.equal(Data($target).style.borderColorGreen.endValue, 113, "Hex #1b component."); 20 | // assert.equal(Data($target).style.borderColorBlue.endValue, 194, "Hex #1c component."); 21 | // assert.equal(Data($target).style.colorRed.easing, "spring", "Per-property easing."); 22 | // assert.equal(Data($target).style.colorRed.startValue, 94, "Forcefed hex #2a component."); 23 | // assert.equal(Data($target).style.colorGreen.startValue, 173, "Forcefed hex #2b component."); 24 | // assert.equal(Data($target).style.colorBlue.startValue, 41, "Forcefed hex #2c component."); 25 | // assert.equal(Data($target).style.colorRed.endValue, 41, "Hex #3a component."); 26 | // assert.equal(Data($target).style.colorGreen.endValue, 125, "Hex #3b component."); 27 | // assert.equal(Data($target).style.colorBlue.endValue, 173, "Hex #3c component."); 28 | }); 29 | -------------------------------------------------------------------------------- /test/src/4_Feature/Feature Forcefeeding.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {Data, defaultProperties, defaultStyles, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.todo("Forcefeeding", (assert) => { 14 | /* Note: Start values are always converted into pixels. W test the conversion ratio we already know to avoid additional work. */ 15 | const testStartWidth = "1rem", 16 | testStartWidthToPx = "16px", 17 | testStartHeight = "10px", 18 | $target = getTarget(); 19 | 20 | Velocity($target, { 21 | width: [100, "linear", testStartWidth], 22 | height: [100, testStartHeight], 23 | opacity: [defaultProperties.opacity as any, "easeInQuad"], 24 | }); 25 | 26 | assert.equal(Data($target).cache.width, parseFloat(testStartWidthToPx), "Forcefed value #1 passed to tween."); 27 | assert.equal(Data($target).cache.height, parseFloat(testStartHeight), "Forcefed value #2 passed to tween."); 28 | assert.equal(Data($target).cache.opacity, defaultStyles.opacity, "Easing was misinterpreted as forcefed value."); 29 | }); 30 | -------------------------------------------------------------------------------- /test/src/4_Feature/Feature Sequences.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncCheckDuration, asyncTests, defaultProperties, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.todo("Sequences", (assert) => { 14 | // var done = assert.async(2), 15 | // $target1 = getTarget(), 16 | // $target2 = getTarget(), 17 | // redirectOptions = {duration: 1500}; 18 | // 19 | // ((window as any).jQuery || (window as any).Zepto || window).Velocity.Redirects.test = function(element, options, elementIndex, elementsLength) { 20 | // if (elementIndex === 0) { 21 | // assert.deepEqual(element, $target1, "Element passed through #1."); 22 | // assert.deepEqual(options, redirectOptions, "Options object passed through #1."); 23 | // assert.equal(elementIndex, 0, "Element index passed through #1."); 24 | // assert.equal(elementsLength, 2, "Elements length passed through #1."); 25 | // 26 | // done(); 27 | // } else if (elementIndex === 1) { 28 | // assert.deepEqual(element, $target2, "Element passed through #2."); 29 | // assert.deepEqual(options, redirectOptions, "Options object passed through #2."); 30 | // assert.equal(elementIndex, 1, "Element index passed through #2."); 31 | // assert.equal(elementsLength, 2, "Elements length passed through #2."); 32 | // 33 | // done(); 34 | // } 35 | // }; 36 | // 37 | // Velocity([$target1, $target2], "test", redirectOptions); 38 | }); 39 | -------------------------------------------------------------------------------- /test/src/4_Feature/Feature Value Functions.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {Data, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.todo("Value Functions", (assert) => { 14 | const testWidth = 10, 15 | $target1 = getTarget(), 16 | $target2 = getTarget(); 17 | 18 | Velocity([$target1, $target2], { 19 | width(i, total) { 20 | return (i + 1) / total * testWidth; 21 | }, 22 | }); 23 | 24 | assert.equal(Data($target1).cache.width, parseFloat(testWidth as any) / 2, "Function value #1 passed to tween."); 25 | assert.equal(Data($target2).cache.width, parseFloat(testWidth as any), "Function value #2 passed to tween."); 26 | }); 27 | -------------------------------------------------------------------------------- /test/src/4_Feature/_module.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | QUnit.module("Feature"); 10 | -------------------------------------------------------------------------------- /test/src/5_UIPack/Packaged Effect slideUp+Down.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {getPropertyValue, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("Packaged Effect: slideUp/Down", (assert) => { 14 | const done = assert.async(4), 15 | $target1 = getTarget(), 16 | $target2 = getTarget(), 17 | initialStyles = { 18 | display: "none", 19 | paddingTop: "123px", 20 | }; 21 | 22 | $target1.style.display = initialStyles.display; 23 | $target1.style.paddingTop = initialStyles.paddingTop; 24 | 25 | Velocity($target1, "slideDown", { 26 | begin(elements) { 27 | assert.deepEqual(elements, [$target1], "slideDown: Begin callback returned."); 28 | 29 | done(); 30 | }, 31 | complete(elements) { 32 | assert.deepEqual(elements, [$target1], "slideDown: Complete callback returned."); 33 | // assert.equal(getPropertyValue($target1, "display"), Values.getDisplayType($target1), "slideDown: display set to default."); 34 | assert.notEqual(getPropertyValue($target1, "height"), 0, "slideDown: height set."); 35 | assert.equal(getPropertyValue($target1, "paddingTop"), initialStyles.paddingTop, "slideDown: paddingTop set."); 36 | 37 | done(); 38 | }, 39 | // }).then(function(elements) { 40 | // assert.deepEqual(elements, [$target1], "slideDown: Promise fulfilled."); 41 | // 42 | // done(); 43 | }); 44 | 45 | Velocity($target2, "slideUp", { 46 | begin(elements) { 47 | assert.deepEqual(elements, [$target2], "slideUp: Begin callback returned."); 48 | 49 | done(); 50 | }, 51 | complete(elements) { 52 | assert.deepEqual(elements, [$target2], "slideUp: Complete callback returned."); 53 | assert.equal(getPropertyValue($target2, "display"), 0, "slideUp: display set to none."); 54 | assert.notEqual(getPropertyValue($target2, "height"), 0, "slideUp: height reset."); 55 | assert.equal(getPropertyValue($target1, "paddingTop"), initialStyles.paddingTop, "slideUp: paddingTop reset."); 56 | 57 | done(); 58 | }, 59 | // }).then(function(elements) { 60 | // assert.deepEqual(elements, [$target2], "slideUp: Promise fulfilled."); 61 | // 62 | // done(); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /test/src/5_UIPack/UI Pack Call Options.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {completeCheckDuration, defaultOptions, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("Call Options", (assert) => { 14 | const done = assert.async(2), 15 | UICallOptions1 = { 16 | delay: 123, 17 | duration: defaultOptions.duration, 18 | easing: "spring", // Should get ignored 19 | }, 20 | $target1 = getTarget(); 21 | 22 | //assert.expect(1); 23 | Velocity($target1, "transition.slideLeftIn", UICallOptions1); 24 | 25 | setTimeout(() => { 26 | // Note: We can do this because transition.slideLeftIn is composed of a single call. 27 | // assert.equal(Data($target1).opts.delay, UICallOptions1.delay, "Whitelisted option passed in."); 28 | // assert.notEqual(Data($target1).opts.easing, UICallOptions1.easing, "Non-whitelisted option not passed in #1a."); 29 | // assert.equal(!/velocity-animating/.test(Data($target1).className), true, "Duration option passed in."); 30 | 31 | done(); 32 | }, completeCheckDuration); 33 | 34 | const UICallOptions2 = { 35 | stagger: 100, 36 | duration: defaultOptions.duration, 37 | backwards: true, 38 | }; 39 | 40 | const $targets = [getTarget(), getTarget(), getTarget()]; 41 | Velocity($targets, "transition.slideLeftIn", UICallOptions2); 42 | 43 | setTimeout(() => { 44 | // assert.equal(Data($targets[0]).opts.delay, UICallOptions2.stagger * 2, "Backwards stagger delay passed in #1a."); 45 | // assert.equal(Data($targets[1]).opts.delay, UICallOptions2.stagger * 1, "Backwards stagger delay passed in #1b."); 46 | // assert.equal(Data($targets[2]).opts.delay, UICallOptions2.stagger * 0, "Backwards stagger delay passed in #1c."); 47 | 48 | done(); 49 | }, completeCheckDuration); 50 | }); 51 | -------------------------------------------------------------------------------- /test/src/5_UIPack/UI Pack Callbacks.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("Callbacks", (assert) => { 14 | const done = assert.async(2), 15 | $targets = [getTarget(), getTarget()]; 16 | 17 | assert.expect(3); 18 | Velocity($targets, "transition.bounceIn", { 19 | begin(elements) { 20 | assert.deepEqual(elements, $targets, "Begin callback returned."); 21 | 22 | done(); 23 | }, 24 | complete(elements) { 25 | assert.deepEqual(elements, $targets, "Complete callback returned."); 26 | 27 | done(); 28 | }, 29 | // }).then(function(elements) { 30 | // assert.deepEqual(elements, $targets, "Promise fulfilled."); 31 | // 32 | // done(); 33 | }); 34 | }); 35 | -------------------------------------------------------------------------------- /test/src/5_UIPack/UI Pack In+Out.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {asyncCheckDuration, completeCheckDuration, defaultOptions, getPropertyValue, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("In/Out", (assert) => { 14 | const done = assert.async(2), 15 | $target1 = getTarget(), 16 | $target2 = getTarget(), 17 | $target3 = getTarget(), 18 | $target4 = getTarget(), 19 | $target5 = getTarget(), 20 | $target6 = getTarget(); 21 | 22 | Velocity($target1, "transition.bounceIn", defaultOptions.duration); 23 | 24 | // Velocity($target2, "transition.bounceIn", {duration: defaultOptions.duration, display: "inline"}); 25 | // 26 | // Velocity($target3, "transition.bounceOut", defaultOptions.duration); 27 | // 28 | // Velocity($target4, "transition.bounceOut", {duration: defaultOptions.duration, display: null}); 29 | // 30 | // $target5.style.visibility = "hidden"; 31 | // Velocity($target5, "transition.bounceIn", {duration: defaultOptions.duration, visibility: "visible"}); 32 | // 33 | // $target6.style.visibility = "visible"; 34 | // Velocity($target6, "transition.bounceOut", {duration: defaultOptions.duration, visibility: "hidden"}); 35 | 36 | assert.expect(8); 37 | setTimeout(() => { 38 | assert.notEqual(getPropertyValue($target3, "display"), 0, "Out: display not prematurely set to none."); 39 | assert.notEqual(getPropertyValue($target6, "visibility"), "hidden", "Out: visibility not prematurely set to hidden."); 40 | 41 | done(); 42 | }, asyncCheckDuration); 43 | 44 | setTimeout(() => { 45 | // assert.equal(getPropertyValue($target1, "display"), Values.getDisplayType($target1), "In: display set to default."); 46 | assert.equal(getPropertyValue($target2, "display"), "inline", "In: Custom inline value set."); 47 | 48 | assert.equal(getPropertyValue($target3, "display"), 0, "Out: display set to none."); 49 | // assert.equal(getPropertyValue($target4, "display"), Values.getDisplayType($target3), "Out: No display value set."); 50 | 51 | assert.equal(getPropertyValue($target5, "visibility"), "visible", "In: visibility set to visible."); 52 | assert.equal(getPropertyValue($target6, "visibility"), "hidden", "Out: visibility set to hidden."); 53 | 54 | done(); 55 | }, completeCheckDuration); 56 | }); 57 | -------------------------------------------------------------------------------- /test/src/5_UIPack/UI Pack RegisterEffect.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {getPropertyValue, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("RegisterEffect", (assert) => { 14 | // const done = assert.async(1), 15 | // effectDefaultDuration = 800; 16 | // 17 | // assert.expect(2); 18 | // Velocity.RegisterEffect("callout.twirl", { 19 | // defaultDuration: effectDefaultDuration, 20 | // calls: [ 21 | // [{rotateZ: 1080}, 0.5], 22 | // [{scaleX: 0.5}, 0.25, {easing: "spring"}], 23 | // [{scaleX: 1}, 0.25, {easing: "spring"}], 24 | // ], 25 | // }); 26 | // 27 | // const $target1 = getTarget(); 28 | // Velocity($target1, "callout.twirl"); 29 | // 30 | // setTimeout(() => { 31 | // assert.equal(parseFloat(getPropertyValue($target1, "rotateZ") as string), 1080, "First call's property animated."); 32 | // assert.equal(parseFloat(getPropertyValue($target1, "scaleX") as string), 1, "Last call's property animated."); 33 | // 34 | // done(); 35 | // }, effectDefaultDuration * 1.5); 36 | }); 37 | -------------------------------------------------------------------------------- /test/src/5_UIPack/UI Pack RunSequence.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity from "velocity-animate"; 10 | import {defaultProperties, getPropertyValue, getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("RunSequence", (assert) => { 14 | // 15 | // var done = assert.async(1), 16 | // $target1 = getTarget(), 17 | // $target2 = getTarget(), 18 | // $target3 = getTarget(), 19 | // mySequence = [ 20 | // {elements: $target1, properties: {opacity: defaultProperties.opacity}}, 21 | // {elements: $target2, properties: {height: defaultProperties.height}}, 22 | // { 23 | // elements: $target3, properties: {width: defaultProperties.width}, options: { 24 | // delay: 100, 25 | // sequenceQueue: false, 26 | // complete: function() { 27 | // assert.equal(parseFloat(getPropertyValue($target1, "opacity") as string), defaultProperties.opacity, "First call's property animated."); 28 | // assert.equal(parseFloat(getPropertyValue($target2, "height") as string), defaultProperties.height, "Second call's property animated."); 29 | // assert.equal(parseFloat(getPropertyValue($target3, "width") as string), defaultProperties.width, "Last call's property animated."); 30 | // 31 | // done(); 32 | // } 33 | // } 34 | // } 35 | // ]; 36 | // 37 | // assert.expect(3); 38 | // Velocity.RunSequence(mySequence); 39 | }); 40 | -------------------------------------------------------------------------------- /test/src/5_UIPack/_module.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | QUnit.module("UI Pack"); 10 | -------------------------------------------------------------------------------- /test/src/6_Properties/Normalization property value reordering.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity, {HTMLorSVGElement} from "velocity-animate"; 10 | import {getTarget} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.skip("GenericReordering", (assert) => { 14 | // function genericReordering(element: HTMLorSVGElement, propertyValue?: string): string | void { 15 | // if (propertyValue === undefined) { 16 | // propertyValue = Velocity(element, "style", "textShadow"); 17 | // const split = propertyValue.split(/\s/g), 18 | // firstPart = split[0]; 19 | // let newValue = ""; 20 | // 21 | // if (Velocity.CSS.ColorNames[firstPart]) { 22 | // split.shift(); 23 | // split.push(firstPart); 24 | // newValue = split.join(" "); 25 | // } else if (firstPart.match(/^#|^hsl|^rgb|-gradient/)) { 26 | // const matchedString = propertyValue.match(/(hsl.*\)|#[\da-fA-F]+|rgb.*\)|.*gradient.*\))\s/g)[0]; 27 | // 28 | // newValue = propertyValue.replace(matchedString, "") + " " + matchedString.trim(); 29 | // } else { 30 | // newValue = propertyValue; 31 | // } 32 | // return newValue; 33 | // } 34 | // } 35 | // 36 | // Velocity("registerNormalization", "Element", "genericReordering", genericReordering); 37 | // 38 | // let tests = [ 39 | // { 40 | // test: "hsl(16, 100%, 66%) 1px 1px 1px", 41 | // result: "1px 1px 1px hsl(16, 100%, 66%)", 42 | // }, { 43 | // test: "-webkit-linear-gradient(red, yellow) 1px 1px 1px", 44 | // result: "1px 1px 1px -webkit-linear-gradient(rgba(255,0,0,1), rgba(255,255,0,1))", 45 | // }, { 46 | // test: "-o-linear-gradient(red, yellow) 1px 1px 1px", 47 | // result: "1px 1px 1px -o-linear-gradient(rgba(255,0,0,1), rgba(255,255,0,1))", 48 | // }, { 49 | // test: "-moz-linear-gradient(red, yellow) 1px 1px 1px", 50 | // result: "1px 1px 1px -moz-linear-gradient(rgba(255,0,0,1), rgba(255,255,0,1))", 51 | // }, { 52 | // test: "linear-gradient(red, yellow) 1px 1px 1px", 53 | // result: "1px 1px 1px linear-gradient(rgba(255,0,0,1), rgba(255,255,0,1))", 54 | // }, { 55 | // test: "red 1px 1px 1px", 56 | // result: "1px 1px 1px rgba(255,0,0,1)", 57 | // }, { 58 | // test: "#000000 1px 1px 1px", 59 | // result: "1px 1px 1px rgba(0,0,0,1)", 60 | // }, { 61 | // test: "rgb(0, 0, 0) 1px 1px 1px", 62 | // result: "1px 1px 1px rgba(0,0,0,1)", 63 | // }, { 64 | // test: "rgba(0, 0, 0, 1) 1px 1px 1px", 65 | // result: "1px 1px 1px rgba(0,0,0,1)", 66 | // }, { 67 | // test: "1px 1px 1px rgb(0, 0, 0)", 68 | // result: "1px 1px 1px rgba(0,0,0,1)", 69 | // }, 70 | // ]; 71 | // 72 | // for (let test of tests) { 73 | // let element = getTarget(); 74 | // 75 | // element.velocity("style", "textShadow", test.test); 76 | // assert.equal(element.velocity("style", "genericReordering"), test.result, test.test); 77 | // } 78 | }); 79 | -------------------------------------------------------------------------------- /test/src/6_Properties/Property Display.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity, {VelocityResult} from "velocity-animate"; 10 | import {getTarget, once} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Display", (assert) => { 14 | const done = assert.async(5); 15 | 16 | Velocity(getTarget(), "style", "display", "none") 17 | .velocity({display: "block"}, { 18 | progress: once((elements: VelocityResult) => { 19 | assert.equal(elements.velocity("style", "display"), "block", "Display:'block' was set immediately."); 20 | 21 | done(); 22 | }), 23 | }); 24 | 25 | Velocity(getTarget(), "style", "display", "none") 26 | .velocity("style", "display", "auto") 27 | .then((elements) => { 28 | assert.equal(elements[0].style.display, "block", "Display:'auto' was understood."); 29 | assert.equal(elements.velocity("style", "display"), "block", "Display:'auto' was cached as 'block'."); 30 | 31 | done(); 32 | }); 33 | 34 | Velocity(getTarget(), "style", "display", "none") 35 | .velocity("style", "display", "") 36 | .then((elements) => { 37 | assert.equal(elements.velocity("style", "display"), "block", "Display:'' was reset correctly."); 38 | 39 | done(); 40 | }); 41 | 42 | Velocity(getTarget(), {display: "none"}, { 43 | progress: once((elements: VelocityResult) => { 44 | assert.notEqual(elements.velocity("style", "display"), "none", "Display:'none' was not set immediately."); 45 | 46 | done(); 47 | }), 48 | }) 49 | .then((elements) => { 50 | assert.equal(elements.velocity("style", "display"), "none", "Display:'none' was set upon completion."); 51 | 52 | done(); 53 | }); 54 | }); 55 | -------------------------------------------------------------------------------- /test/src/6_Properties/Property Visibility.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | import Velocity, {VelocityResult} from "velocity-animate"; 10 | import {getTarget, once} from "../utilities"; 11 | import "./_module"; 12 | 13 | QUnit.test("Visibility", (assert) => { 14 | const done = assert.async(4); 15 | 16 | Velocity(getTarget(), "style", "visibility", "hidden") 17 | .velocity({visibility: "visible"}, { 18 | progress: once((elements: VelocityResult) => { 19 | assert.equal(elements.velocity("style", "visibility"), "visible", "Visibility:'visible' was set immediately."); 20 | 21 | done(); 22 | }), 23 | }); 24 | 25 | Velocity(getTarget(), "style", "visibility", "hidden") 26 | .velocity("style", "visibility", "") 27 | .then((elements) => { 28 | // NOTE: The test elements inherit "hidden", so while illogical it 29 | // is in fact correct. 30 | assert.equal(elements.velocity("style", "visibility"), "hidden", "Visibility:'' was reset correctly."); 31 | 32 | done(); 33 | }); 34 | 35 | Velocity(getTarget(), {visibility: "hidden"}, { 36 | progress: once((elements: VelocityResult) => { 37 | assert.notEqual(elements.velocity("style", "visibility"), "visible", "Visibility:'hidden' was not set immediately."); 38 | 39 | done(); 40 | }), 41 | }) 42 | .then((elements) => { 43 | assert.equal(elements.velocity("style", "visibility"), "hidden", "Visibility:'hidden' was set upon completion."); 44 | 45 | done(); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /test/src/6_Properties/_module.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | 9 | QUnit.module("Properties"); 10 | -------------------------------------------------------------------------------- /test/src/test.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2018 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | import "qunit"; 8 | import "./utilities"; 9 | 10 | import "./1_Core/_module"; 11 | import "./1_Core/Arguments"; 12 | import "./1_Core/End Value Caching"; 13 | import "./1_Core/End Value Setting"; 14 | import "./1_Core/Start Value Calculation"; 15 | import "./1_Core/Unit Calculation"; 16 | 17 | import "./2_Option/_module"; 18 | import "./2_Option/Option Begin"; 19 | import "./2_Option/Option Complete"; 20 | import "./2_Option/Option Delay"; 21 | import "./2_Option/Option Duration"; 22 | import "./2_Option/Option Easing"; 23 | import "./2_Option/Option Fps Limit"; 24 | import "./2_Option/Option Loop"; 25 | import "./2_Option/Option Progress"; 26 | import "./2_Option/Option Queue"; 27 | import "./2_Option/Option Repeat"; 28 | import "./2_Option/Option Speed"; 29 | import "./2_Option/Option Sync"; 30 | 31 | import "./3_Command/_module"; 32 | import "./3_Command/Command Finish"; 33 | import "./3_Command/Command Pause + Resume"; 34 | import "./3_Command/Command Reverse"; 35 | import "./3_Command/Command Scroll"; 36 | import "./3_Command/Command Stop"; 37 | import "./3_Command/Command Tween"; 38 | 39 | import "./4_Feature/_module"; 40 | import "./4_Feature/Feature Classname"; 41 | import "./4_Feature/Feature Colors"; 42 | import "./4_Feature/Feature Forcefeeding"; 43 | import "./4_Feature/Feature Promises"; 44 | import "./4_Feature/Feature Sequences"; 45 | import "./4_Feature/Feature Value Functions"; 46 | 47 | import "./5_UIPack/_module"; 48 | import "./5_UIPack/Packaged Effect slideUp+Down"; 49 | import "./5_UIPack/UI Pack Call Options"; 50 | import "./5_UIPack/UI Pack Callbacks"; 51 | import "./5_UIPack/UI Pack In+Out"; 52 | import "./5_UIPack/UI Pack RegisterEffect"; 53 | import "./5_UIPack/UI Pack RunSequence"; 54 | 55 | import "./6_Properties/_module"; 56 | import "./6_Properties/Normalization property value reordering"; 57 | import "./6_Properties/Property Display"; 58 | import "./6_Properties/Property Visibility"; 59 | -------------------------------------------------------------------------------- /test/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "files": [ 4 | "test.ts" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowUnreachableCode": true, 4 | "allowUnusedLabels": true, 5 | "alwaysStrict": false, 6 | "forceConsistentCasingInFileNames": true, 7 | "noEmitOnError": false, 8 | "noImplicitAny": false, 9 | "module": "es2015", 10 | "moduleResolution": "node", 11 | "outDir": "build/", 12 | "preserveConstEnums": true, 13 | "removeComments": false, 14 | "sourceMap": true, 15 | "target": "es6", 16 | "lib" : [ 17 | "dom", 18 | "es6", 19 | "es2016", 20 | "scripthost" 21 | ] 22 | }, 23 | "files": [ 24 | "src/velocity.ts", 25 | "src-ui/velocity.ui.ts", 26 | "test/src/test.ts" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /version.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * velocity-animate (C) 2014-2017 Julian Shapiro. 3 | * 4 | * Licensed under the MIT license. See LICENSE file in the project root for details. 5 | */ 6 | 7 | // Automatically generated 8 | export const VERSION = "2.0.6"; 9 | --------------------------------------------------------------------------------