├── LICENSE ├── README.md ├── dist └── apl-transitions.json ├── package.json ├── sample └── transitions_sample.json ├── scripts └── build.js └── src ├── attention_seekers ├── bounce.json ├── flash.json ├── headShake.json ├── heartBeat.json ├── jello.json ├── pulse.json ├── rubberBand.json ├── shake.json ├── shakeX.json ├── shakeY.json ├── swing.json ├── tada.json └── wobble.json ├── back_entrances ├── backInDown.json ├── backInLeft.json ├── backInRight.json └── backInUp.json ├── back_exits ├── backOutDown.json ├── backOutLeft.json ├── backOutRight.json └── backOutUp.json ├── bounce_exits ├── bounceOut.json ├── bounceOutDown.json ├── bounceOutLeft.json ├── bounceOutRight.json └── bounceOutUp.json ├── bouncing_entrances ├── bounceIn.json ├── bounceInDown.json ├── bounceInLeft.json ├── bounceInRight.json └── bounceInUp.json ├── fade_entrances ├── fadeIn.json ├── fadeInBottomLeft.json ├── fadeInBottomRight.json ├── fadeInDown.json ├── fadeInLeft.json ├── fadeInRight.json ├── fadeInTopLeft.json ├── fadeInTopRight.json └── fadeInUp.json ├── fading_exits ├── fadeOut.json ├── fadeOutBottomLeft.json ├── fadeOutBottomRight.json ├── fadeOutDown.json ├── fadeOutLeft.json ├── fadeOutRight.json ├── fadeOutTopLeft.json ├── fadeOutTopRight.json └── fadeOutUp.json ├── lightspeed ├── lightSpeedIn.json ├── lightSpeedInLeft.json ├── lightSpeedInRight.json ├── lightSpeedOut.json ├── lightSpeedOutLeft.json └── lightSpeedOutRight.json ├── rotating_entrances ├── rotateIn.json ├── rotateInDownLeft.json ├── rotateInDownRight.json ├── rotateInUpLeft.json └── rotateInUpRight.json ├── rotating_exits ├── rotateOut.json ├── rotateOutDownLeft.json ├── rotateOutDownRight.json ├── rotateOutUpLeft.json └── rotateOutUpRight.json ├── sliding_entrances ├── slideInDown.json ├── slideInLeft.json ├── slideInRight.json └── slideInUp.json ├── sliding_exits ├── slideOutDown.json ├── slideOutLeft.json ├── slideOutRight.json └── slideOutUp.json ├── specials ├── hinge.json ├── jackInTheBox.json ├── rollIn.json └── rollOut.json ├── zooming_entrances ├── zoomIn.json ├── zoomInDown.json ├── zoomInLeft.json ├── zoomInRight.json └── zoomInUp.json └── zooming_exits ├── zoomOut.json ├── zoomOutDown.json ├── zoomOutLeft.json ├── zoomOutRight.json └── zoomOutUp.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Arjun Ganesan 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # APL Transitions 2 | 3 | This is collection of transitions for APL components implemented with AnimateItem. All the transitiosn are derived from css transitions available in [Animate.css](https://github.com/daneden/animate.css) 4 | 5 | [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/arjunganesan) 6 | 7 | For more alexa related tools/libraries visit - https://voicefirst.tools/ 8 | 9 | # Usage 10 | 11 | ## Adding Transitions to APL Document 12 | 13 | ### Using Import 14 | 15 | Copy the file [apl-transitions.json](https://github.com/arjun-g/apl-transitions/blob/master/dist/apl-transitions.json) to any storage of your choice with public access. And it can be imported into APL. 16 | 17 | ```json 18 | { 19 | "type": "APL", 20 | "version": "1.1", 21 | "import": [ 22 | { 23 | "name": "apl-transitions", 24 | "version": "https://yourdomain.com//apl-transitions.json" 25 | } 26 | ] 27 | .... 28 | } 29 | ``` 30 | 31 | ### Using User Defined Commands 32 | 33 | If you want to use only few transitions then you can just copy those transitions to "commands" in APL 34 | 35 | ```json 36 | { 37 | "type": "APL", 38 | "version": "1.1", 39 | "import": [], 40 | "commands": { 41 | "fadeIn": { 42 | .... 43 | }, 44 | "fadeOut": { 45 | .... 46 | } 47 | } 48 | .... 49 | } 50 | ``` 51 | 52 | ## Attaching to Component 53 | 54 | Transition can be added to components by adding it to the onMount event 55 | 56 | ```json 57 | { 58 | "type": "Text", 59 | "text": "APL 1.1 Transitions", 60 | "onMount: [ 61 | { 62 | "type": "fadeIn", 63 | "duration": 1000 64 | } 65 | ], 66 | .... 67 | } 68 | ``` 69 | 70 | ### Parameters 71 | 72 | #### duration `(in milliseconds)` `Required` 73 | 74 | Total duration of transition. Advised to be shorter. Required for all transitions 75 | 76 | #### delay `(in milliseconds)` `Optional` 77 | 78 | Adds a optional delay to transitions before it starts 79 | 80 | #### distance `(Dimension)` `Optional` `Only for few transition` 81 | 82 | For few transitions you can configure the distance parameter to control the animation 83 | 84 | # Transitions 85 | 86 | Here is the list of transitions available as User Defind Commands: 87 | 88 | | User Defined Commands | | | | 89 | | ---------------------------------------------- | ----------------------------------------------- | ---------------------------------------------- | ---------------------------------------------- | 90 | | backInDown
`(duration,delay)` | backInLeft
`(duration,delay)` | backInRight
`(duration,delay)` | backInUp
`(duration,delay)` | 91 | | backOutDown
`(duration,delay)` | backOutLeft
`(duration,delay)` | backOutRight
`(duration,delay)` | backOutUp
`(duration,delay)` | 92 | | bounce
`(duration,delay)` | bounceIn
`(duration,delay)` | bounceInDown
`(duration,distance,delay)` | bounceInLeft
`(duration,distance,delay)` | 93 | | bounceInRight
`(duration,distance,delay)` | bounceInUp
`(duration,distance,delay)` | bounceOut
`(duration,delay)` | bounceOutDown
`(duration,distance,delay)` | 94 | | bounceOutLeft
`(duration,distance,delay)` | bounceOutRight
`(duration,distance,delay)` | bounceOutUp
`(duration,distance,delay)` | fadeIn
`(duration,delay)` | 95 | | fadeInBottomLeft
`(duration,delay)` | fadeInBottomRight
`(duration,delay)` | fadeInDown
`(duration,distance,delay)` | fadeInLeft
`(duration,distance,delay)` | 96 | | fadeInRight
`(duration,distance,delay)` | fadeInTopLeft
`(duration,delay)` | fadeInTopRight
`(duration,delay)` | fadeInUp
`(duration,distance,delay)` | 97 | | fadeOut
`(duration,delay)` | fadeOutBottomLeft
`(duration,delay)` | fadeOutBottomRight
`(duration,delay)` | fadeOutDown
`(duration,distance,delay)` | 98 | | fadeOutLeft
`(duration,distance,delay)` | fadeOutRight
`(duration,distance,delay)` | fadeOutTopLeft
`(duration,delay)` | fadeOutTopRight
`(duration,delay)` | 99 | | fadeOutUp
`(duration,distance,delay)` | flash
`(duration,delay)` | headShake
`(duration,delay)` | heartBeat
`(duration,delay)` | 100 | | hinge
`(duration,delay)` | jackInTheBox
`(duration,delay)` | jello
`(duration,delay)` | lightSpeedIn
`(duration,delay)` | 101 | | lightSpeedInLeft
`(duration,delay)` | lightSpeedInRight
`(duration,delay)` | lightSpeedOut
`(duration,distance,delay)` | lightSpeedOutLeft
`(duration,delay)` | 102 | | lightSpeedOutRight
`(duration,delay)` | pulse
`(duration,delay)` | rollIn
`(duration,delay)` | rollOut
`(duration,delay)` | 103 | | rotateIn
`(duration,delay)` | rotateInDownLeft
`(duration,delay)` | rotateInDownRight
`(duration,delay)` | rotateInUpLeft
`(duration,delay)` | 104 | | rotateInUpRight
`(duration,delay)` | rotateOut
`(duration,delay)` | rotateOutDownLeft
`(duration,delay)` | rotateOutDownRight
`(duration,delay)` | 105 | | rotateOutUpLeft
`(duration,delay)` | rotateOutUpRight
`(duration,delay)` | rubberBand
`(duration,delay)` | shake
`(duration,delay)` | 106 | | shakeX
`(duration,delay)` | shakeY
`(duration,delay)` | slideInDown
`(duration,distance,delay)` | slideInLeft
`(duration,distance,delay)` | 107 | | slideInRight
`(duration,distance,delay)` | slideInUp
`(duration,distance,delay)` | slideOutDown
`(duration,distance,delay)` | slideOutLeft
`(duration,distance,delay)` | 108 | | slideOutRight
`(duration,distance,delay)` | slideOutUp
`(duration,distance,delay)` | swing
`(duration,delay)` | tada
`(duration,delay)` | 109 | | wobble
`(duration,delay)` | zoomIn
`(duration,delay)` | zoomInDown
`(duration,distance,delay)` | zoomInLeft
`(duration,distance,delay)` | 110 | | zoomInRight
`(duration,distance,delay)` | zoomInUp
`(duration,distance,delay)` | zoomOut
`(duration,delay)` | zoomOutDown
`(duration,distance,delay)` | 111 | | zoomOutLeft
`(duration,distance,delay)` | zoomOutRight
`(duration,distance,delay)` | zoomOutUp
`(duration,distance,delay)` | | 112 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "apl-transitions", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "cd scripts && node build" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | 4 | var fileList = function (dir, filelist) { 5 | var files = fs.readdirSync(dir); 6 | filelist = filelist || []; 7 | files.forEach(function (file) { 8 | if (fs.statSync(dir + file).isDirectory()) { 9 | filelist = fileList(dir + file + '/', filelist); 10 | } 11 | else { 12 | filelist.push(dir + file); 13 | } 14 | }); 15 | return filelist; 16 | }; 17 | 18 | let files = fileList(path.join(__dirname, '..', '/', 'src') + '/'); 19 | 20 | let layout = { 21 | type: "APL", 22 | version: "1.1.0", 23 | commands: {} 24 | }; 25 | 26 | files.forEach(file => { 27 | let json = fs.readFileSync(file).toString(); 28 | let fileName = path.basename(file).replace('.json', ''); 29 | layout.commands[fileName] = JSON.parse(json); 30 | }); 31 | 32 | 33 | 34 | fs.writeFileSync(path.join(__dirname, '..', 'dist', 'apl-transitions.json'), JSON.stringify(layout, null, 4)); -------------------------------------------------------------------------------- /src/attention_seekers/bounce.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "Sequential", 9 | "commands": [ 10 | { 11 | "type": "AnimateItem", 12 | "duration": "${duration * 0.2}", 13 | "delay": "${delay || 0}", 14 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 15 | "value": [ 16 | { 17 | "property": "transform", 18 | "from": [ 19 | { 20 | "translateY": "0" 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateY": "0" 26 | } 27 | ] 28 | } 29 | ] 30 | }, 31 | { 32 | "type": "AnimateItem", 33 | "duration": "${duration * 0.2}", 34 | "easing": "cubic-bezier(0.755, 0.05, 0.855, 0.06)", 35 | "value": [ 36 | { 37 | "property": "transform", 38 | "from": [ 39 | { 40 | "translateY": "0" 41 | } 42 | ], 43 | "to": [ 44 | { 45 | "translateY": "-30vh" 46 | } 47 | ] 48 | } 49 | ] 50 | }, 51 | { 52 | "type": "AnimateItem", 53 | "duration": "${duration * 0.03}", 54 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 55 | "value": [ 56 | { 57 | "property": "transform", 58 | "from": [ 59 | { 60 | "translateY": "-30vh" 61 | } 62 | ], 63 | "to": [ 64 | { 65 | "translateY": "-30vh" 66 | } 67 | ] 68 | } 69 | ] 70 | }, 71 | { 72 | "type": "AnimateItem", 73 | "duration": "${duration * 0.1}", 74 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 75 | "value": [ 76 | { 77 | "property": "transform", 78 | "from": [ 79 | { 80 | "translateY": "-30vh" 81 | } 82 | ], 83 | "to": [ 84 | { 85 | "translateY": "0" 86 | } 87 | ] 88 | } 89 | ] 90 | }, 91 | { 92 | "type": "AnimateItem", 93 | "duration": "${duration * 0.17}", 94 | "easing": "cubic-bezier(0.755, 0.05, 0.855, 0.06)", 95 | "value": [ 96 | { 97 | "property": "transform", 98 | "from": [ 99 | { 100 | "translateY": "0" 101 | } 102 | ], 103 | "to": [ 104 | { 105 | "translateY": "-15vh" 106 | } 107 | ] 108 | } 109 | ] 110 | }, 111 | { 112 | "type": "AnimateItem", 113 | "duration": "${duration * 0.1}", 114 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 115 | "value": [ 116 | { 117 | "property": "transform", 118 | "from": [ 119 | { 120 | "translateY": "-15vh" 121 | } 122 | ], 123 | "to": [ 124 | { 125 | "translateY": "0" 126 | } 127 | ] 128 | } 129 | ] 130 | }, 131 | { 132 | "type": "AnimateItem", 133 | "duration": "${duration * 0.1}", 134 | "value": [ 135 | { 136 | "property": "transform", 137 | "from": [ 138 | { 139 | "translateY": "-15vh" 140 | } 141 | ], 142 | "to": [ 143 | { 144 | "translateY": "-4vh" 145 | } 146 | ] 147 | } 148 | ] 149 | }, 150 | { 151 | "type": "AnimateItem", 152 | "duration": "${duration * 0.1}", 153 | "value": [ 154 | { 155 | "property": "transform", 156 | "from": [ 157 | { 158 | "translateY": "-4vh" 159 | } 160 | ], 161 | "to": [ 162 | { 163 | "translateY": "0" 164 | } 165 | ] 166 | } 167 | ] 168 | } 169 | ] 170 | } 171 | ] 172 | } -------------------------------------------------------------------------------- /src/attention_seekers/flash.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.25}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 1, 15 | "to": 0 16 | } 17 | ] 18 | }, 19 | { 20 | "type": "AnimateItem", 21 | "duration": "${duration * 0.25}", 22 | "delay": "${delay || 0}", 23 | "value": [ 24 | { 25 | "property": "opacity", 26 | "from": 0, 27 | "to": 1 28 | } 29 | ] 30 | }, 31 | { 32 | "type": "AnimateItem", 33 | "duration": "${duration * 0.25}", 34 | "delay": "${delay || 0}", 35 | "value": [ 36 | { 37 | "property": "opacity", 38 | "from": 0, 39 | "to": 1 40 | } 41 | ] 42 | }, 43 | { 44 | "type": "AnimateItem", 45 | "duration": "${duration * 0.25}", 46 | "delay": "${delay || 0}", 47 | "value": [ 48 | { 49 | "property": "opacity", 50 | "from": 0, 51 | "to": 1 52 | } 53 | ] 54 | } 55 | ] 56 | } -------------------------------------------------------------------------------- /src/attention_seekers/headShake.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.065}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0" 17 | } 18 | ], 19 | "to": [ 20 | { 21 | "translateX": "-6px" 22 | }, 23 | { 24 | "rotate": -9 25 | } 26 | ] 27 | } 28 | ] 29 | }, 30 | { 31 | "type": "AnimateItem", 32 | "duration": "${duration * 0.12}", 33 | "value": [ 34 | { 35 | "property": "transform", 36 | "from": [ 37 | { 38 | "translateX": "-6px" 39 | }, 40 | { 41 | "rotate": -9 42 | } 43 | ], 44 | "to": [ 45 | { 46 | "translateX": "5px" 47 | }, 48 | { 49 | "rotate": 7 50 | } 51 | ] 52 | } 53 | ] 54 | }, 55 | { 56 | "type": "AnimateItem", 57 | "duration": "${duration * 0.13}", 58 | "value": [ 59 | { 60 | "property": "transform", 61 | "from": [ 62 | { 63 | "translateX": "5px" 64 | }, 65 | { 66 | "rotate": 7 67 | } 68 | ], 69 | "to": [ 70 | { 71 | "translateX": "-3px" 72 | }, 73 | { 74 | "rotate": -5 75 | } 76 | ] 77 | } 78 | ] 79 | }, 80 | { 81 | "type": "AnimateItem", 82 | "duration": "${duration * 0.12}", 83 | "value": [ 84 | { 85 | "property": "transform", 86 | "from": [ 87 | { 88 | "translateX": "-3px" 89 | }, 90 | { 91 | "rotate": -5 92 | } 93 | ], 94 | "to": [ 95 | { 96 | "translateX": "2px" 97 | }, 98 | { 99 | "rotate": 3 100 | } 101 | ] 102 | } 103 | ] 104 | }, 105 | { 106 | "type": "AnimateItem", 107 | "duration": "${duration * 0.065}", 108 | "value": [ 109 | { 110 | "property": "transform", 111 | "from": [ 112 | { 113 | "translateX": "2px" 114 | }, 115 | { 116 | "rotate": 3 117 | } 118 | ], 119 | "to": [ 120 | { 121 | "translateX": "0" 122 | } 123 | ] 124 | } 125 | ] 126 | } 127 | ] 128 | } -------------------------------------------------------------------------------- /src/attention_seekers/heartBeat.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.14}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "scaleX": 1.3, 23 | "scaleY": 1.3 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | "type": "AnimateItem", 31 | "duration": "${duration * 0.14}", 32 | "value": [ 33 | { 34 | "property": "transform", 35 | "from": [ 36 | { 37 | "scaleX": 1.3, 38 | "scaleY": 1.3 39 | } 40 | ], 41 | "to": [ 42 | { 43 | "scaleX": 1, 44 | "scaleY": 1 45 | } 46 | ] 47 | } 48 | ] 49 | }, 50 | { 51 | "type": "AnimateItem", 52 | "duration": "${duration * 0.14}", 53 | "value": [ 54 | { 55 | "property": "transform", 56 | "from": [ 57 | { 58 | "scaleX": 1, 59 | "scaleY": 1 60 | } 61 | ], 62 | "to": [ 63 | { 64 | "scaleX": 1.3, 65 | "scaleY": 1.3 66 | } 67 | ] 68 | } 69 | ] 70 | }, 71 | { 72 | "type": "AnimateItem", 73 | "duration": "${duration * 0.28}", 74 | "value": [ 75 | { 76 | "property": "transform", 77 | "from": [ 78 | { 79 | "scaleX": 1.3, 80 | "scaleY": 1.3 81 | } 82 | ], 83 | "to": [ 84 | { 85 | "scaleX": 1, 86 | "scaleY": 1 87 | } 88 | ] 89 | } 90 | ] 91 | } 92 | ] 93 | } -------------------------------------------------------------------------------- /src/attention_seekers/jello.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "Idle", 9 | "delay": "${(duration * 0.111) + (delay || 0)}" 10 | }, 11 | { 12 | "type": "AnimateItem", 13 | "duration": "${duration * 0.111}", 14 | "value": [ 15 | { 16 | "property": "transform", 17 | "from": [ 18 | { 19 | "skewX": 0, 20 | "skewY": 0 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "skewX": -12.5, 26 | "skewY": -12.5 27 | } 28 | ] 29 | } 30 | ] 31 | }, 32 | { 33 | "type": "AnimateItem", 34 | "duration": "${duration * 0.111}", 35 | "value": [ 36 | { 37 | "property": "transform", 38 | "from": [ 39 | { 40 | "skewX": -12.5, 41 | "skewY": -12.5 42 | } 43 | ], 44 | "to": [ 45 | { 46 | "skewX": 6.25, 47 | "skewY": 6.25 48 | } 49 | ] 50 | } 51 | ] 52 | }, 53 | { 54 | "type": "AnimateItem", 55 | "duration": "${duration * 0.111}", 56 | "value": [ 57 | { 58 | "property": "transform", 59 | "from": [ 60 | { 61 | "skewX": 6.25, 62 | "skewY": 6.25 63 | } 64 | ], 65 | "to": [ 66 | { 67 | "skewX": -3.125, 68 | "skewY": -3.125 69 | } 70 | ] 71 | } 72 | ] 73 | }, 74 | { 75 | "type": "AnimateItem", 76 | "duration": "${duration * 0.111}", 77 | "value": [ 78 | { 79 | "property": "transform", 80 | "from": [ 81 | { 82 | "skewX": -3.125, 83 | "skewY": -3.125 84 | } 85 | ], 86 | "to": [ 87 | { 88 | "skewX": 1.5625, 89 | "skewY": 1.5625 90 | } 91 | ] 92 | } 93 | ] 94 | }, 95 | { 96 | "type": "AnimateItem", 97 | "duration": "${duration * 0.111}", 98 | "value": [ 99 | { 100 | "property": "transform", 101 | "from": [ 102 | { 103 | "skewX": 1.5625, 104 | "skewY": 1.5625 105 | } 106 | ], 107 | "to": [ 108 | { 109 | "skewX": -0.78125, 110 | "skewY": -0.78125 111 | } 112 | ] 113 | } 114 | ] 115 | }, 116 | { 117 | "type": "AnimateItem", 118 | "duration": "${duration * 0.111}", 119 | "value": [ 120 | { 121 | "property": "transform", 122 | "from": [ 123 | { 124 | "skewX": -0.78125, 125 | "skewY": -0.78125 126 | } 127 | ], 128 | "to": [ 129 | { 130 | "skewX": 0.390625, 131 | "skewY": 0.390625 132 | } 133 | ] 134 | } 135 | ] 136 | }, 137 | { 138 | "type": "AnimateItem", 139 | "duration": "${duration * 0.111}", 140 | "value": [ 141 | { 142 | "property": "transform", 143 | "from": [ 144 | { 145 | "skewX": 0.390625, 146 | "skewY": 0.390625 147 | } 148 | ], 149 | "to": [ 150 | { 151 | "skewX": -0.1953125, 152 | "skewY": -0.1953125 153 | } 154 | ] 155 | } 156 | ] 157 | }, 158 | { 159 | "type": "AnimateItem", 160 | "duration": "${duration * 0.112}", 161 | "value": [ 162 | { 163 | "property": "transform", 164 | "from": [ 165 | { 166 | "skewX": -0.1953125, 167 | "skewY": -0.1953125 168 | } 169 | ], 170 | "to": [ 171 | { 172 | "skewX": 0, 173 | "skewY": 0 174 | } 175 | ] 176 | } 177 | ] 178 | } 179 | ] 180 | } -------------------------------------------------------------------------------- /src/attention_seekers/pulse.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.5}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "scaleX": 1.05, 23 | "scaleY": 1.05 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | "type": "AnimateItem", 31 | "duration": "${duration * 0.5}", 32 | "value": [ 33 | { 34 | "property": "transform", 35 | "from": [ 36 | { 37 | "scaleX": 1.05, 38 | "scaleY": 1.05 39 | } 40 | ], 41 | "to": [ 42 | { 43 | "scaleX": 1, 44 | "scaleY": 1 45 | } 46 | ] 47 | } 48 | ] 49 | } 50 | ] 51 | } -------------------------------------------------------------------------------- /src/attention_seekers/rubberBand.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.3}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "scaleX": 1.25, 23 | "scaleY": 0.75 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | "type": "AnimateItem", 31 | "duration": "${duration * 0.1}", 32 | "value": [ 33 | { 34 | "property": "transform", 35 | "from": [ 36 | { 37 | "scaleX": 1.25, 38 | "scaleY": 0.75 39 | } 40 | ], 41 | "to": [ 42 | { 43 | "scaleX": 0.75, 44 | "scaleY": 1.25 45 | } 46 | ] 47 | } 48 | ] 49 | }, 50 | { 51 | "type": "AnimateItem", 52 | "duration": "${duration * 0.1}", 53 | "value": [ 54 | { 55 | "property": "transform", 56 | "from": [ 57 | { 58 | "scaleX": 0.75, 59 | "scaleY": 1.25 60 | } 61 | ], 62 | "to": [ 63 | { 64 | "scaleX": 1.15, 65 | "scaleY": 0.85 66 | } 67 | ] 68 | } 69 | ] 70 | }, 71 | { 72 | "type": "AnimateItem", 73 | "duration": "${duration * 0.15}", 74 | "value": [ 75 | { 76 | "property": "transform", 77 | "from": [ 78 | { 79 | "scaleX": 1.15, 80 | "scaleY": 0.85 81 | } 82 | ], 83 | "to": [ 84 | { 85 | "scaleX": 0.95, 86 | "scaleY": 1.05 87 | } 88 | ] 89 | } 90 | ] 91 | }, 92 | { 93 | "type": "AnimateItem", 94 | "duration": "${duration * 0.1}", 95 | "value": [ 96 | { 97 | "property": "transform", 98 | "from": [ 99 | { 100 | "scaleX": 0.95, 101 | "scaleY": 1.05 102 | } 103 | ], 104 | "to": [ 105 | { 106 | "scaleX": 1.05, 107 | "scaleY": 0.95 108 | } 109 | ] 110 | } 111 | ] 112 | }, 113 | { 114 | "type": "AnimateItem", 115 | "duration": "${duration * 0.25}", 116 | "value": [ 117 | { 118 | "property": "transform", 119 | "from": [ 120 | { 121 | "scaleX": 1.05, 122 | "scaleY": 0.95 123 | } 124 | ], 125 | "to": [ 126 | { 127 | "scaleX": 1, 128 | "scaleY": 1 129 | } 130 | ] 131 | } 132 | ] 133 | } 134 | ] 135 | } -------------------------------------------------------------------------------- /src/attention_seekers/shake.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0" 17 | } 18 | ], 19 | "to": [ 20 | { 21 | "translateX": "-10px" 22 | } 23 | ] 24 | } 25 | ] 26 | }, 27 | { 28 | "type": "AnimateItem", 29 | "duration": "${duration * 0.1}", 30 | "value": [ 31 | { 32 | "property": "transform", 33 | "from": [ 34 | { 35 | "translateX": "-10px" 36 | } 37 | ], 38 | "to": [ 39 | { 40 | "translateX": "10px" 41 | } 42 | ] 43 | } 44 | ] 45 | }, 46 | { 47 | "type": "AnimateItem", 48 | "duration": "${duration * 0.1}", 49 | "value": [ 50 | { 51 | "property": "transform", 52 | "from": [ 53 | { 54 | "translateX": "10px" 55 | } 56 | ], 57 | "to": [ 58 | { 59 | "translateX": "-10px" 60 | } 61 | ] 62 | } 63 | ] 64 | }, 65 | { 66 | "type": "AnimateItem", 67 | "duration": "${duration * 0.1}", 68 | "value": [ 69 | { 70 | "property": "transform", 71 | "from": [ 72 | { 73 | "translateX": "-10px" 74 | } 75 | ], 76 | "to": [ 77 | { 78 | "translateX": "10px" 79 | } 80 | ] 81 | } 82 | ] 83 | }, 84 | { 85 | "type": "AnimateItem", 86 | "duration": "${duration * 0.1}", 87 | "value": [ 88 | { 89 | "property": "transform", 90 | "from": [ 91 | { 92 | "translateX": "10px" 93 | } 94 | ], 95 | "to": [ 96 | { 97 | "translateX": "-10px" 98 | } 99 | ] 100 | } 101 | ] 102 | }, 103 | { 104 | "type": "AnimateItem", 105 | "duration": "${duration * 0.1}", 106 | "value": [ 107 | { 108 | "property": "transform", 109 | "from": [ 110 | { 111 | "translateX": "-10px" 112 | } 113 | ], 114 | "to": [ 115 | { 116 | "translateX": "10px" 117 | } 118 | ] 119 | } 120 | ] 121 | }, 122 | { 123 | "type": "AnimateItem", 124 | "duration": "${duration * 0.1}", 125 | "value": [ 126 | { 127 | "property": "transform", 128 | "from": [ 129 | { 130 | "translateX": "10px" 131 | } 132 | ], 133 | "to": [ 134 | { 135 | "translateX": "-10px" 136 | } 137 | ] 138 | } 139 | ] 140 | }, 141 | { 142 | "type": "AnimateItem", 143 | "duration": "${duration * 0.1}", 144 | "value": [ 145 | { 146 | "property": "transform", 147 | "from": [ 148 | { 149 | "translateX": "-10px" 150 | } 151 | ], 152 | "to": [ 153 | { 154 | "translateX": "10px" 155 | } 156 | ] 157 | } 158 | ] 159 | }, 160 | { 161 | "type": "AnimateItem", 162 | "duration": "${duration * 0.1}", 163 | "value": [ 164 | { 165 | "property": "transform", 166 | "from": [ 167 | { 168 | "translateX": "10px" 169 | } 170 | ], 171 | "to": [ 172 | { 173 | "translateX": "-10px" 174 | } 175 | ] 176 | } 177 | ] 178 | }, 179 | { 180 | "type": "AnimateItem", 181 | "duration": "${duration * 0.1}", 182 | "value": [ 183 | { 184 | "property": "transform", 185 | "from": [ 186 | { 187 | "translateX": "-10px" 188 | } 189 | ], 190 | "to": [ 191 | { 192 | "translateX": "0" 193 | } 194 | ] 195 | } 196 | ] 197 | } 198 | ] 199 | } -------------------------------------------------------------------------------- /src/attention_seekers/shakeX.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0", 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "-10px", 23 | "translateY": "0" 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | "type": "AnimateItem", 31 | "duration": "${duration * 0.1}", 32 | "value": [ 33 | { 34 | "property": "transform", 35 | "from": [ 36 | { 37 | "translateX": "-10px", 38 | "translateY": "0" 39 | } 40 | ], 41 | "to": [ 42 | { 43 | "translateX": "10px", 44 | "translateY": "0" 45 | } 46 | ] 47 | } 48 | ] 49 | }, 50 | { 51 | "type": "AnimateItem", 52 | "duration": "${duration * 0.1}", 53 | "value": [ 54 | { 55 | "property": "transform", 56 | "from": [ 57 | { 58 | "translateX": "10px", 59 | "translateY": "0" 60 | } 61 | ], 62 | "to": [ 63 | { 64 | "translateX": "-10px", 65 | "translateY": "0" 66 | } 67 | ] 68 | } 69 | ] 70 | }, 71 | { 72 | "type": "AnimateItem", 73 | "duration": "${duration * 0.1}", 74 | "value": [ 75 | { 76 | "property": "transform", 77 | "from": [ 78 | { 79 | "translateX": "-10px", 80 | "translateY": "0" 81 | } 82 | ], 83 | "to": [ 84 | { 85 | "translateX": "10px", 86 | "translateY": "0" 87 | } 88 | ] 89 | } 90 | ] 91 | }, 92 | { 93 | "type": "AnimateItem", 94 | "duration": "${duration * 0.1}", 95 | "value": [ 96 | { 97 | "property": "transform", 98 | "from": [ 99 | { 100 | "translateX": "10px", 101 | "translateY": "0" 102 | } 103 | ], 104 | "to": [ 105 | { 106 | "translateX": "-10px", 107 | "translateY": "0" 108 | } 109 | ] 110 | } 111 | ] 112 | }, 113 | { 114 | "type": "AnimateItem", 115 | "duration": "${duration * 0.1}", 116 | "value": [ 117 | { 118 | "property": "transform", 119 | "from": [ 120 | { 121 | "translateX": "-10px", 122 | "translateY": "0" 123 | } 124 | ], 125 | "to": [ 126 | { 127 | "translateX": "10px", 128 | "translateY": "0" 129 | } 130 | ] 131 | } 132 | ] 133 | }, 134 | { 135 | "type": "AnimateItem", 136 | "duration": "${duration * 0.1}", 137 | "value": [ 138 | { 139 | "property": "transform", 140 | "from": [ 141 | { 142 | "translateX": "10px", 143 | "translateY": "0" 144 | } 145 | ], 146 | "to": [ 147 | { 148 | "translateX": "-10px", 149 | "translateY": "0" 150 | } 151 | ] 152 | } 153 | ] 154 | }, 155 | { 156 | "type": "AnimateItem", 157 | "duration": "${duration * 0.1}", 158 | "value": [ 159 | { 160 | "property": "transform", 161 | "from": [ 162 | { 163 | "translateX": "-10px", 164 | "translateY": "0" 165 | } 166 | ], 167 | "to": [ 168 | { 169 | "translateX": "10px", 170 | "translateY": "0" 171 | } 172 | ] 173 | } 174 | ] 175 | }, 176 | { 177 | "type": "AnimateItem", 178 | "duration": "${duration * 0.1}", 179 | "value": [ 180 | { 181 | "property": "transform", 182 | "from": [ 183 | { 184 | "translateX": "10px", 185 | "translateY": "0" 186 | } 187 | ], 188 | "to": [ 189 | { 190 | "translateX": "-10px", 191 | "translateY": "0" 192 | } 193 | ] 194 | } 195 | ] 196 | }, 197 | { 198 | "type": "AnimateItem", 199 | "duration": "${duration * 0.1}", 200 | "value": [ 201 | { 202 | "property": "transform", 203 | "from": [ 204 | { 205 | "translateX": "-10px", 206 | "translateY": "0" 207 | } 208 | ], 209 | "to": [ 210 | { 211 | "translateX": "0", 212 | "translateY": "0" 213 | } 214 | ] 215 | } 216 | ] 217 | } 218 | ] 219 | } -------------------------------------------------------------------------------- /src/attention_seekers/shakeY.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0", 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0", 23 | "translateY": "-10px" 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | "type": "AnimateItem", 31 | "duration": "${duration * 0.1}", 32 | "value": [ 33 | { 34 | "property": "transform", 35 | "from": [ 36 | { 37 | "translateX": "0", 38 | "translateY": "-10px" 39 | } 40 | ], 41 | "to": [ 42 | { 43 | "translateX": "0", 44 | "translateY": "10px" 45 | } 46 | ] 47 | } 48 | ] 49 | }, 50 | { 51 | "type": "AnimateItem", 52 | "duration": "${duration * 0.1}", 53 | "value": [ 54 | { 55 | "property": "transform", 56 | "from": [ 57 | { 58 | "translateX": "0", 59 | "translateY": "10px" 60 | } 61 | ], 62 | "to": [ 63 | { 64 | "translateX": "0", 65 | "translateY": "-10px" 66 | } 67 | ] 68 | } 69 | ] 70 | }, 71 | { 72 | "type": "AnimateItem", 73 | "duration": "${duration * 0.1}", 74 | "value": [ 75 | { 76 | "property": "transform", 77 | "from": [ 78 | { 79 | "translateX": "0", 80 | "translateY": "-10px" 81 | } 82 | ], 83 | "to": [ 84 | { 85 | "translateX": "0", 86 | "translateY": "10px" 87 | } 88 | ] 89 | } 90 | ] 91 | }, 92 | { 93 | "type": "AnimateItem", 94 | "duration": "${duration * 0.1}", 95 | "value": [ 96 | { 97 | "property": "transform", 98 | "from": [ 99 | { 100 | "translateX": "0", 101 | "translateY": "10px" 102 | } 103 | ], 104 | "to": [ 105 | { 106 | "translateX": "0", 107 | "translateY": "-10px" 108 | } 109 | ] 110 | } 111 | ] 112 | }, 113 | { 114 | "type": "AnimateItem", 115 | "duration": "${duration * 0.1}", 116 | "value": [ 117 | { 118 | "property": "transform", 119 | "from": [ 120 | { 121 | "translateX": "0", 122 | "translateY": "-10px" 123 | } 124 | ], 125 | "to": [ 126 | { 127 | "translateX": "0", 128 | "translateY": "10px" 129 | } 130 | ] 131 | } 132 | ] 133 | }, 134 | { 135 | "type": "AnimateItem", 136 | "duration": "${duration * 0.1}", 137 | "value": [ 138 | { 139 | "property": "transform", 140 | "from": [ 141 | { 142 | "translateX": "0", 143 | "translateY": "10px" 144 | } 145 | ], 146 | "to": [ 147 | { 148 | "translateX": "0", 149 | "translateY": "-10px" 150 | } 151 | ] 152 | } 153 | ] 154 | }, 155 | { 156 | "type": "AnimateItem", 157 | "duration": "${duration * 0.1}", 158 | "value": [ 159 | { 160 | "property": "transform", 161 | "from": [ 162 | { 163 | "translateX": "0", 164 | "translateY": "-10px" 165 | } 166 | ], 167 | "to": [ 168 | { 169 | "translateX": "0", 170 | "translateY": "10px" 171 | } 172 | ] 173 | } 174 | ] 175 | }, 176 | { 177 | "type": "AnimateItem", 178 | "duration": "${duration * 0.1}", 179 | "value": [ 180 | { 181 | "property": "transform", 182 | "from": [ 183 | { 184 | "translateX": "0", 185 | "translateY": "10px" 186 | } 187 | ], 188 | "to": [ 189 | { 190 | "translateX": "0", 191 | "translateY": "-10px" 192 | } 193 | ] 194 | } 195 | ] 196 | }, 197 | { 198 | "type": "AnimateItem", 199 | "duration": "${duration * 0.1}", 200 | "value": [ 201 | { 202 | "property": "transform", 203 | "from": [ 204 | { 205 | "translateX": "0", 206 | "translateY": "-10px" 207 | } 208 | ], 209 | "to": [ 210 | { 211 | "translateX": "0", 212 | "translateY": "0" 213 | } 214 | ] 215 | } 216 | ] 217 | } 218 | ] 219 | } -------------------------------------------------------------------------------- /src/attention_seekers/swing.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.2}", 10 | "delay": "${delay || 0}", 11 | "value": [] 12 | }, 13 | { 14 | "type": "AnimateItem", 15 | "duration": "${duration * 0.2}", 16 | "value": [ 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "rotate": 15 22 | } 23 | ], 24 | "to": [ 25 | { 26 | "rotate": -10 27 | } 28 | ] 29 | } 30 | ] 31 | }, 32 | { 33 | "type": "AnimateItem", 34 | "duration": "${duration * 0.2}", 35 | "value": [ 36 | { 37 | "property": "transform", 38 | "from": [ 39 | { 40 | "rotate": -10 41 | } 42 | ], 43 | "to": [ 44 | { 45 | "rotate": 5 46 | } 47 | ] 48 | } 49 | ] 50 | }, 51 | { 52 | "type": "AnimateItem", 53 | "duration": "${duration * 0.2}", 54 | "value": [ 55 | { 56 | "property": "transform", 57 | "from": [ 58 | { 59 | "rotate": 5 60 | } 61 | ], 62 | "to": [ 63 | { 64 | "rotate": -5 65 | } 66 | ] 67 | } 68 | ] 69 | }, 70 | { 71 | "type": "AnimateItem", 72 | "duration": "${duration * 0.2}", 73 | "value": [ 74 | { 75 | "property": "transform", 76 | "from": [ 77 | { 78 | "rotate": -5 79 | } 80 | ], 81 | "to": [ 82 | { 83 | "rotate": 0 84 | } 85 | ] 86 | } 87 | ] 88 | } 89 | ] 90 | } -------------------------------------------------------------------------------- /src/attention_seekers/tada.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "scaleX": 0.9, 23 | "scaleY": 0.9 24 | }, 25 | { 26 | "rotate": -3 27 | } 28 | ] 29 | } 30 | ] 31 | }, 32 | { 33 | "type": "Idle", 34 | "delay": "${duration * 0.1}" 35 | }, 36 | { 37 | "type": "AnimateItem", 38 | "duration": "${duration * 0.1}", 39 | "value": [ 40 | { 41 | "property": "transform", 42 | "from": [ 43 | { 44 | "scaleX": 0.9, 45 | "scaleY": 0.9 46 | }, 47 | { 48 | "rotate": -3 49 | } 50 | ], 51 | "to": [ 52 | { 53 | "scaleX": 1.1, 54 | "scaleY": 1.1 55 | }, 56 | { 57 | "rotate": 3 58 | } 59 | ] 60 | } 61 | ] 62 | }, 63 | { 64 | "type": "AnimateItem", 65 | "duration": "${duration * 0.1}", 66 | "value": [ 67 | { 68 | "property": "transform", 69 | "from": [ 70 | { 71 | "rotate": 3 72 | } 73 | ], 74 | "to": [ 75 | { 76 | "rotate": -3 77 | } 78 | ] 79 | } 80 | ] 81 | }, 82 | { 83 | "type": "AnimateItem", 84 | "duration": "${duration * 0.1}", 85 | "value": [ 86 | { 87 | "property": "transform", 88 | "from": [ 89 | { 90 | "rotate": -3 91 | } 92 | ], 93 | "to": [ 94 | { 95 | "rotate": 3 96 | } 97 | ] 98 | } 99 | ] 100 | }, 101 | { 102 | "type": "AnimateItem", 103 | "duration": "${duration * 0.1}", 104 | "value": [ 105 | { 106 | "property": "transform", 107 | "from": [ 108 | { 109 | "rotate": 3 110 | } 111 | ], 112 | "to": [ 113 | { 114 | "rotate": -3 115 | } 116 | ] 117 | } 118 | ] 119 | }, 120 | { 121 | "type": "AnimateItem", 122 | "duration": "${duration * 0.1}", 123 | "value": [ 124 | { 125 | "property": "transform", 126 | "from": [ 127 | { 128 | "rotate": -3 129 | } 130 | ], 131 | "to": [ 132 | { 133 | "rotate": 3 134 | } 135 | ] 136 | } 137 | ] 138 | }, 139 | { 140 | "type": "AnimateItem", 141 | "duration": "${duration * 0.1}", 142 | "value": [ 143 | { 144 | "property": "transform", 145 | "from": [ 146 | { 147 | "rotate": 3 148 | } 149 | ], 150 | "to": [ 151 | { 152 | "rotate": -3 153 | } 154 | ] 155 | } 156 | ] 157 | }, 158 | { 159 | "type": "AnimateItem", 160 | "duration": "${duration * 0.1}", 161 | "value": [ 162 | { 163 | "property": "transform", 164 | "from": [ 165 | { 166 | "rotate": -3 167 | } 168 | ], 169 | "to": [ 170 | { 171 | "rotate": 3 172 | } 173 | ] 174 | } 175 | ] 176 | }, 177 | { 178 | "type": "AnimateItem", 179 | "duration": "${duration * 0.1}", 180 | "value": [ 181 | { 182 | "property": "transform", 183 | "from": [ 184 | { 185 | "scaleX": 1.1, 186 | "scaleY": 1.1 187 | }, 188 | { 189 | "rotate": 3 190 | } 191 | ], 192 | "to": [ 193 | { 194 | "scaleX": 1, 195 | "scaleY": 1 196 | }, 197 | { 198 | "rotate": 0 199 | } 200 | ] 201 | } 202 | ] 203 | } 204 | ] 205 | } -------------------------------------------------------------------------------- /src/attention_seekers/wobble.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.15}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0" 17 | }, 18 | { 19 | "rotate": 0 20 | } 21 | ], 22 | "to": [ 23 | { 24 | "translateX": "-25%" 25 | }, 26 | { 27 | "rotate": -5 28 | } 29 | ] 30 | } 31 | ] 32 | }, 33 | { 34 | "type": "AnimateItem", 35 | "duration": "${duration * 0.15}", 36 | "value": [ 37 | { 38 | "property": "transform", 39 | "from": [ 40 | { 41 | "translateX": "-25%" 42 | }, 43 | { 44 | "rotate": -5 45 | } 46 | ], 47 | "to": [ 48 | { 49 | "translateX": "20%" 50 | }, 51 | { 52 | "rotate": 3 53 | } 54 | ] 55 | } 56 | ] 57 | }, 58 | { 59 | "type": "AnimateItem", 60 | "duration": "${duration * 0.15}", 61 | "value": [ 62 | { 63 | "property": "transform", 64 | "from": [ 65 | { 66 | "translateX": "20%" 67 | }, 68 | { 69 | "rotate": 3 70 | } 71 | ], 72 | "to": [ 73 | { 74 | "translateX": "-15%" 75 | }, 76 | { 77 | "rotate": -3 78 | } 79 | ] 80 | } 81 | ] 82 | }, 83 | { 84 | "type": "AnimateItem", 85 | "duration": "${duration * 0.15}", 86 | "value": [ 87 | { 88 | "property": "transform", 89 | "from": [ 90 | { 91 | "translateX": "-15%" 92 | }, 93 | { 94 | "rotate": -3 95 | } 96 | ], 97 | "to": [ 98 | { 99 | "translateX": "10%" 100 | }, 101 | { 102 | "rotate": 2 103 | } 104 | ] 105 | } 106 | ] 107 | }, 108 | { 109 | "type": "AnimateItem", 110 | "duration": "${duration * 0.15}", 111 | "value": [ 112 | { 113 | "property": "transform", 114 | "from": [ 115 | { 116 | "translateX": "15%" 117 | }, 118 | { 119 | "rotate": 2 120 | } 121 | ], 122 | "to": [ 123 | { 124 | "translateX": "-5%" 125 | }, 126 | { 127 | "rotate": -1 128 | } 129 | ] 130 | } 131 | ] 132 | }, 133 | { 134 | "type": "AnimateItem", 135 | "duration": "${duration * 0.25}", 136 | "value": [ 137 | { 138 | "property": "transform", 139 | "from": [ 140 | { 141 | "translateX": "-5%" 142 | }, 143 | { 144 | "rotate": -1 145 | } 146 | ], 147 | "to": [ 148 | { 149 | "translateX": "0" 150 | }, 151 | { 152 | "rotate": 0 153 | } 154 | ] 155 | } 156 | ] 157 | } 158 | ] 159 | } -------------------------------------------------------------------------------- /src/back_entrances/backInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.8}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateY": "-1200px" 17 | }, 18 | { 19 | "scaleX": 0.7, 20 | "scaleY": 0.7 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateY": "0px" 26 | }, 27 | { 28 | "scaleX": 0.7, 29 | "scaleY": 0.7 30 | } 31 | ] 32 | }, 33 | { 34 | "property": "opacity", 35 | "from": "0.7", 36 | "to": "0.7" 37 | } 38 | ] 39 | }, 40 | { 41 | "type": "AnimateItem", 42 | "duration": "${duration * 0.2}", 43 | "value": [ 44 | { 45 | "property": "transform", 46 | "from": [ 47 | { 48 | "translateY": "0px" 49 | }, 50 | { 51 | "scaleX": 0.7, 52 | "scaleY": 0.7 53 | } 54 | ], 55 | "to": [ 56 | { 57 | "scaleX": 1, 58 | "scaleY": 1 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "1" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_entrances/backInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.8}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "-2000px" 17 | }, 18 | { 19 | "scaleX": 0.7, 20 | "scaleY": 0.7 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateX": "0px" 26 | }, 27 | { 28 | "scaleX": 0.7, 29 | "scaleY": 0.7 30 | } 31 | ] 32 | }, 33 | { 34 | "property": "opacity", 35 | "from": "0.7", 36 | "to": "0.7" 37 | } 38 | ] 39 | }, 40 | { 41 | "type": "AnimateItem", 42 | "duration": "${duration * 0.2}", 43 | "value": [ 44 | { 45 | "property": "transform", 46 | "from": [ 47 | { 48 | "translateX": "0px" 49 | }, 50 | { 51 | "scaleX": 0.7, 52 | "scaleY": 0.7 53 | } 54 | ], 55 | "to": [ 56 | { 57 | "scaleX": 1, 58 | "scaleY": 1 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "1" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_entrances/backInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.8}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "2000px" 17 | }, 18 | { 19 | "scaleX": 0.7, 20 | "scaleY": 0.7 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateX": "0px" 26 | }, 27 | { 28 | "scaleX": 0.7, 29 | "scaleY": 0.7 30 | } 31 | ] 32 | }, 33 | { 34 | "property": "opacity", 35 | "from": "0.7", 36 | "to": "0.7" 37 | } 38 | ] 39 | }, 40 | { 41 | "type": "AnimateItem", 42 | "duration": "${duration * 0.2}", 43 | "value": [ 44 | { 45 | "property": "transform", 46 | "from": [ 47 | { 48 | "translateX": "0px" 49 | }, 50 | { 51 | "scaleX": 0.7, 52 | "scaleY": 0.7 53 | } 54 | ], 55 | "to": [ 56 | { 57 | "scaleX": 1, 58 | "scaleY": 1 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "1" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_entrances/backInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.8}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateY": "1200px" 17 | }, 18 | { 19 | "scaleX": 0.7, 20 | "scaleY": 0.7 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateY": "0px" 26 | }, 27 | { 28 | "scaleX": 0.7, 29 | "scaleY": 0.7 30 | } 31 | ] 32 | }, 33 | { 34 | "property": "opacity", 35 | "from": "0.7", 36 | "to": "0.7" 37 | } 38 | ] 39 | }, 40 | { 41 | "type": "AnimateItem", 42 | "duration": "${duration * 0.2}", 43 | "value": [ 44 | { 45 | "property": "transform", 46 | "from": [ 47 | { 48 | "translateY": "0px" 49 | }, 50 | { 51 | "scaleX": 0.7, 52 | "scaleY": 0.7 53 | } 54 | ], 55 | "to": [ 56 | { 57 | "scaleX": 1, 58 | "scaleY": 1 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "1" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_exits/backOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.2}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": "0px" 23 | }, 24 | { 25 | "scaleX": 0.7, 26 | "scaleY": 0.7 27 | } 28 | ] 29 | }, 30 | { 31 | "property": "opacity", 32 | "from": "1", 33 | "to": "0.7" 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.8}", 40 | "value": [ 41 | { 42 | "property": "transform", 43 | "from": [ 44 | { 45 | "translateY": "0px" 46 | }, 47 | { 48 | "scaleX": 0.7, 49 | "scaleY": 0.7 50 | } 51 | ], 52 | "to": [ 53 | { 54 | "translateY": "700px" 55 | }, 56 | { 57 | "scaleX": 0.7, 58 | "scaleY": 0.7 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "0.7" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_exits/backOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.2}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0px" 23 | }, 24 | { 25 | "scaleX": 0.7, 26 | "scaleY": 0.7 27 | } 28 | ] 29 | }, 30 | { 31 | "property": "opacity", 32 | "from": "1", 33 | "to": "0.7" 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.8}", 40 | "value": [ 41 | { 42 | "property": "transform", 43 | "from": [ 44 | { 45 | "translateX": "0px" 46 | }, 47 | { 48 | "scaleX": 0.7, 49 | "scaleY": 0.7 50 | } 51 | ], 52 | "to": [ 53 | { 54 | "translateX": "-2000px" 55 | }, 56 | { 57 | "scaleX": 0.7, 58 | "scaleY": 0.7 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "0.7" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_exits/backOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.2}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0px" 23 | }, 24 | { 25 | "scaleX": 0.7, 26 | "scaleY": 0.7 27 | } 28 | ] 29 | }, 30 | { 31 | "property": "opacity", 32 | "from": "1", 33 | "to": "0.7" 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.8}", 40 | "value": [ 41 | { 42 | "property": "transform", 43 | "from": [ 44 | { 45 | "translateX": "0px" 46 | }, 47 | { 48 | "scaleX": 0.7, 49 | "scaleY": 0.7 50 | } 51 | ], 52 | "to": [ 53 | { 54 | "translateX": "2000px" 55 | }, 56 | { 57 | "scaleX": 0.7, 58 | "scaleY": 0.7 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "0.7" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/back_exits/backOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.2}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 1, 17 | "scaleY": 1 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": "0px" 23 | }, 24 | { 25 | "scaleX": 0.7, 26 | "scaleY": 0.7 27 | } 28 | ] 29 | }, 30 | { 31 | "property": "opacity", 32 | "from": "1", 33 | "to": "0.7" 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.8}", 40 | "value": [ 41 | { 42 | "property": "transform", 43 | "from": [ 44 | { 45 | "translateY": "0px" 46 | }, 47 | { 48 | "scaleX": 0.7, 49 | "scaleY": 0.7 50 | } 51 | ], 52 | "to": [ 53 | { 54 | "translateY": "-700px" 55 | }, 56 | { 57 | "scaleX": 0.7, 58 | "scaleY": 0.7 59 | } 60 | ] 61 | }, 62 | { 63 | "property": "opacity", 64 | "from": "0.7", 65 | "to": "0.7" 66 | } 67 | ] 68 | } 69 | ] 70 | } -------------------------------------------------------------------------------- /src/bounce_exits/bounceOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "delay": "${delay || 0}", 10 | "duration": "${duration * 0.2}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "scaleX": 0, 17 | "scaleY": 0 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "scaleX": 0.9, 23 | "scaleY": 0.9 24 | } 25 | ] 26 | } 27 | ] 28 | }, 29 | { 30 | "type": "AnimateItem", 31 | "duration": "${duration * 0.3}", 32 | "value": [ 33 | { 34 | "property": "transform", 35 | "from": [ 36 | { 37 | "scaleX": 0.9, 38 | "scaleY": 0.9 39 | } 40 | ], 41 | "to": [ 42 | { 43 | "scaleX": 1.1, 44 | "scaleY": 1.1 45 | } 46 | ] 47 | } 48 | ] 49 | }, 50 | { 51 | "type": "Idle", 52 | "delay": "${duration * 0.05}" 53 | }, 54 | { 55 | "type": "AnimateItem", 56 | "duration": "${duration * 0.45}", 57 | "value": [ 58 | { 59 | "property": "opacity", 60 | "to": 0 61 | }, 62 | { 63 | "property": "transform", 64 | "from": [ 65 | { 66 | "scaleX": 1.1, 67 | "scaleY": 1.1 68 | } 69 | ], 70 | "to": [ 71 | { 72 | "scaleX": 0.3, 73 | "scaleY": 0.3 74 | } 75 | ] 76 | } 77 | ] 78 | } 79 | ] 80 | } -------------------------------------------------------------------------------- /src/bounce_exits/bounceOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "delay": "${delay || 0}", 11 | "duration": "${duration * 0.2}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": "10px" 23 | } 24 | ] 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "AnimateItem", 30 | "duration": "${duration * 0.2}", 31 | "value": [ 32 | { 33 | "property": "transform", 34 | "from": [ 35 | { 36 | "translateY": "10px" 37 | } 38 | ], 39 | "to": [ 40 | { 41 | "translateY": "-20px" 42 | } 43 | ] 44 | } 45 | ] 46 | }, 47 | { 48 | "type": "Idle", 49 | "delay": "${duration * 0.05}" 50 | }, 51 | { 52 | "type": "AnimateItem", 53 | "duration": "${duration * 0.55}", 54 | "value": [ 55 | { 56 | "property": "opacity", 57 | "to": 0 58 | }, 59 | { 60 | "property": "transform", 61 | "from": [ 62 | { 63 | "translateY": "-20px" 64 | } 65 | ], 66 | "to": [ 67 | { 68 | "translateY": "${distance || '200vh'}" 69 | } 70 | ] 71 | } 72 | ] 73 | } 74 | ] 75 | } -------------------------------------------------------------------------------- /src/bounce_exits/bounceOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "Sequential", 10 | "commands": [ 11 | { 12 | "type": "AnimateItem", 13 | "delay": "${delay || 0}", 14 | "duration": "${duration * 0.2}", 15 | "value": [ 16 | { 17 | "property": "transform", 18 | "from": [ 19 | { 20 | "translateX": "0" 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateX": "20px" 26 | } 27 | ] 28 | } 29 | ] 30 | }, 31 | { 32 | "type": "AnimateItem", 33 | "duration": "${duration * 0.8}", 34 | "value": [ 35 | { 36 | "property": "opacity", 37 | "to": 0 38 | }, 39 | { 40 | "property": "transform", 41 | "from": [ 42 | { 43 | "translateX": "20px" 44 | } 45 | ], 46 | "to": [ 47 | { 48 | "translateX": "${distance && ('-' + distance) || '-200vw'}" 49 | } 50 | ] 51 | } 52 | ] 53 | } 54 | ] 55 | } 56 | ] 57 | } -------------------------------------------------------------------------------- /src/bounce_exits/bounceOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "Sequential", 10 | "commands": [ 11 | { 12 | "type": "AnimateItem", 13 | "delay": "${delay || 0}", 14 | "duration": "${duration * 0.2}", 15 | "value": [ 16 | { 17 | "property": "transform", 18 | "from": [ 19 | { 20 | "translateX": "0" 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "translateX": "-20px" 26 | } 27 | ] 28 | } 29 | ] 30 | }, 31 | { 32 | "type": "AnimateItem", 33 | "duration": "${duration * 0.8}", 34 | "value": [ 35 | { 36 | "property": "opacity", 37 | "to": 0 38 | }, 39 | { 40 | "property": "transform", 41 | "from": [ 42 | { 43 | "translateX": "-20px" 44 | } 45 | ], 46 | "to": [ 47 | { 48 | "translateX": "${distance || '200vw'}" 49 | } 50 | ] 51 | } 52 | ] 53 | } 54 | ] 55 | } 56 | ] 57 | } -------------------------------------------------------------------------------- /src/bounce_exits/bounceOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "delay": "${delay || 0}", 11 | "duration": "${duration * 0.2}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": "-10px" 23 | } 24 | ] 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "AnimateItem", 30 | "duration": "${duration * 0.2}", 31 | "value": [ 32 | { 33 | "property": "transform", 34 | "from": [ 35 | { 36 | "translateY": "-10px" 37 | } 38 | ], 39 | "to": [ 40 | { 41 | "translateY": "20px" 42 | } 43 | ] 44 | } 45 | ] 46 | }, 47 | { 48 | "type": "Idle", 49 | "delay": "${duration * 0.05}" 50 | }, 51 | { 52 | "type": "AnimateItem", 53 | "duration": "${duration * 0.55}", 54 | "value": [ 55 | { 56 | "property": "opacity", 57 | "to": 0 58 | }, 59 | { 60 | "property": "transform", 61 | "from": [ 62 | { 63 | "translateY": "20px" 64 | } 65 | ], 66 | "to": [ 67 | { 68 | "translateY": "${distance && ('-' + distance) || '-200vh'}" 69 | } 70 | ] 71 | } 72 | ] 73 | } 74 | ] 75 | } -------------------------------------------------------------------------------- /src/bouncing_entrances/bounceIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "Sequential", 9 | "commands": [ 10 | { 11 | "type": "AnimateItem", 12 | "delay": "${delay || 0}", 13 | "duration": "${duration / 5}", 14 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 15 | "value": [ 16 | { 17 | "property": "opacity", 18 | "from": 0, 19 | "to": 0.25 20 | }, 21 | { 22 | "property": "transform", 23 | "from": [ 24 | { 25 | "scaleX": "0.3", 26 | "scaleY": "0.3" 27 | } 28 | ], 29 | "to": [ 30 | { 31 | "scaleX": "1.1", 32 | "scaleY": "1.1" 33 | } 34 | ] 35 | } 36 | ] 37 | }, 38 | { 39 | "type": "AnimateItem", 40 | "duration": "${duration / 5}", 41 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 42 | "value": [ 43 | { 44 | "property": "opacity", 45 | "from": 0.25, 46 | "to": 0.5 47 | }, 48 | { 49 | "property": "transform", 50 | "from": [ 51 | { 52 | "scaleX": "1.1", 53 | "scaleY": "1.1" 54 | } 55 | ], 56 | "to": [ 57 | { 58 | "scaleX": "0.9", 59 | "scaleY": "0.9" 60 | } 61 | ] 62 | } 63 | ] 64 | }, 65 | { 66 | "type": "AnimateItem", 67 | "duration": "${duration / 5}", 68 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 69 | "value": [ 70 | { 71 | "property": "opacity", 72 | "from": 0.5, 73 | "to": 0.75 74 | }, 75 | { 76 | "property": "transform", 77 | "from": [ 78 | { 79 | "scaleX": "0.9", 80 | "scaleY": "0.9" 81 | } 82 | ], 83 | "to": [ 84 | { 85 | "scaleX": "1.03", 86 | "scaleY": "1.03" 87 | } 88 | ] 89 | } 90 | ] 91 | }, 92 | { 93 | "type": "AnimateItem", 94 | "duration": "${duration / 5}", 95 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 96 | "value": [ 97 | { 98 | "property": "opacity", 99 | "from": 0.75, 100 | "to": 1 101 | }, 102 | { 103 | "property": "transform", 104 | "from": [ 105 | { 106 | "scaleX": "1.03", 107 | "scaleY": "1.03" 108 | } 109 | ], 110 | "to": [ 111 | { 112 | "scaleX": "0.97", 113 | "scaleY": "0.97" 114 | } 115 | ] 116 | } 117 | ] 118 | }, 119 | { 120 | "type": "AnimateItem", 121 | "duration": "${duration / 5}", 122 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 123 | "value": [ 124 | { 125 | "property": "transform", 126 | "from": [ 127 | { 128 | "scaleX": "0.97", 129 | "scaleY": "0.97" 130 | } 131 | ], 132 | "to": [ 133 | { 134 | "scaleX": "1", 135 | "scaleY": "1" 136 | } 137 | ] 138 | } 139 | ] 140 | } 141 | ] 142 | } 143 | ] 144 | } -------------------------------------------------------------------------------- /src/bouncing_entrances/bounceInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "Sequential", 10 | "commands": [ 11 | { 12 | "type": "AnimateItem", 13 | "delay": "${delay || 0}", 14 | "duration": "${duration * 0.6}", 15 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 16 | "value": [ 17 | { 18 | "property": "opacity", 19 | "from": 0, 20 | "to": 1 21 | }, 22 | { 23 | "property": "transform", 24 | "from": [ 25 | { 26 | "translateY": "${distance && ('-' + distance) || '-200vh'}" 27 | } 28 | ], 29 | "to": [ 30 | { 31 | "translateY": "25px" 32 | } 33 | ] 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.15}", 40 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 41 | "value": [ 42 | { 43 | "property": "transform", 44 | "from": [ 45 | { 46 | "translateY": "25px" 47 | } 48 | ], 49 | "to": [ 50 | { 51 | "translateY": "-10px" 52 | } 53 | ] 54 | } 55 | ] 56 | }, 57 | { 58 | "type": "AnimateItem", 59 | "duration": "${duration * 0.15}", 60 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 61 | "value": [ 62 | { 63 | "property": "transform", 64 | "from": [ 65 | { 66 | "translateY": "-10px" 67 | } 68 | ], 69 | "to": [ 70 | { 71 | "translateY": "5px" 72 | } 73 | ] 74 | } 75 | ] 76 | }, 77 | { 78 | "type": "AnimateItem", 79 | "duration": "${duration * 0.1}", 80 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 81 | "value": [ 82 | { 83 | "property": "transform", 84 | "from": [ 85 | { 86 | "translateY": "5px" 87 | } 88 | ], 89 | "to": [ 90 | { 91 | "translateY": "0" 92 | } 93 | ] 94 | } 95 | ] 96 | } 97 | ] 98 | } 99 | ] 100 | } -------------------------------------------------------------------------------- /src/bouncing_entrances/bounceInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "Sequential", 10 | "commands": [ 11 | { 12 | "type": "AnimateItem", 13 | "delay": "${delay || 0}", 14 | "duration": "${duration * 0.6}", 15 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 16 | "value": [ 17 | { 18 | "property": "opacity", 19 | "from": 0, 20 | "to": 1 21 | }, 22 | { 23 | "property": "transform", 24 | "from": [ 25 | { 26 | "translateX": "${distance && ('-' + distance) || '-200vh'}" 27 | } 28 | ], 29 | "to": [ 30 | { 31 | "translateX": "25px" 32 | } 33 | ] 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.15}", 40 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 41 | "value": [ 42 | { 43 | "property": "transform", 44 | "from": [ 45 | { 46 | "translateX": "25px" 47 | } 48 | ], 49 | "to": [ 50 | { 51 | "translateX": "-10px" 52 | } 53 | ] 54 | } 55 | ] 56 | }, 57 | { 58 | "type": "AnimateItem", 59 | "duration": "${duration * 0.15}", 60 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 61 | "value": [ 62 | { 63 | "property": "transform", 64 | "from": [ 65 | { 66 | "translateX": "-10px" 67 | } 68 | ], 69 | "to": [ 70 | { 71 | "translateX": "5px" 72 | } 73 | ] 74 | } 75 | ] 76 | }, 77 | { 78 | "type": "AnimateItem", 79 | "duration": "${duration * 0.1}", 80 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 81 | "value": [ 82 | { 83 | "property": "transform", 84 | "from": [ 85 | { 86 | "translateX": "5px" 87 | } 88 | ], 89 | "to": [ 90 | { 91 | "translateX": "0" 92 | } 93 | ] 94 | } 95 | ] 96 | } 97 | ] 98 | } 99 | ] 100 | } -------------------------------------------------------------------------------- /src/bouncing_entrances/bounceInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "Sequential", 10 | "commands": [ 11 | { 12 | "type": "AnimateItem", 13 | "delay": "${delay || 0}", 14 | "duration": "${duration * 0.6}", 15 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 16 | "value": [ 17 | { 18 | "property": "opacity", 19 | "from": 0, 20 | "to": 1 21 | }, 22 | { 23 | "property": "transform", 24 | "from": [ 25 | { 26 | "translateX": "${distance || '200vh'}" 27 | } 28 | ], 29 | "to": [ 30 | { 31 | "translateX": "25px" 32 | } 33 | ] 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.15}", 40 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 41 | "value": [ 42 | { 43 | "property": "transform", 44 | "from": [ 45 | { 46 | "translateX": "-25px" 47 | } 48 | ], 49 | "to": [ 50 | { 51 | "translateX": "10px" 52 | } 53 | ] 54 | } 55 | ] 56 | }, 57 | { 58 | "type": "AnimateItem", 59 | "duration": "${duration * 0.15}", 60 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 61 | "value": [ 62 | { 63 | "property": "transform", 64 | "from": [ 65 | { 66 | "translateX": "10px" 67 | } 68 | ], 69 | "to": [ 70 | { 71 | "translateX": "-5px" 72 | } 73 | ] 74 | } 75 | ] 76 | }, 77 | { 78 | "type": "AnimateItem", 79 | "duration": "${duration * 0.1}", 80 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 81 | "value": [ 82 | { 83 | "property": "transform", 84 | "from": [ 85 | { 86 | "translateX": "-5px" 87 | } 88 | ], 89 | "to": [ 90 | { 91 | "translateX": "0" 92 | } 93 | ] 94 | } 95 | ] 96 | } 97 | ] 98 | } 99 | ] 100 | } -------------------------------------------------------------------------------- /src/bouncing_entrances/bounceInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "Sequential", 10 | "commands": [ 11 | { 12 | "type": "AnimateItem", 13 | "delay": "${delay || 0}", 14 | "duration": "${duration * 0.6}", 15 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 16 | "value": [ 17 | { 18 | "property": "opacity", 19 | "from": 0, 20 | "to": 1 21 | }, 22 | { 23 | "property": "transform", 24 | "from": [ 25 | { 26 | "translateY": "${distance || '200vh'}" 27 | } 28 | ], 29 | "to": [ 30 | { 31 | "translateY": "-20px" 32 | } 33 | ] 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.15}", 40 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 41 | "value": [ 42 | { 43 | "property": "transform", 44 | "from": [ 45 | { 46 | "translateY": "-20px" 47 | } 48 | ], 49 | "to": [ 50 | { 51 | "translateY": "10px" 52 | } 53 | ] 54 | } 55 | ] 56 | }, 57 | { 58 | "type": "AnimateItem", 59 | "duration": "${duration * 0.15}", 60 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 61 | "value": [ 62 | { 63 | "property": "transform", 64 | "from": [ 65 | { 66 | "translateY": "10px" 67 | } 68 | ], 69 | "to": [ 70 | { 71 | "translateY": "-5px" 72 | } 73 | ] 74 | } 75 | ] 76 | }, 77 | { 78 | "type": "AnimateItem", 79 | "duration": "${duration * 0.1}", 80 | "easing": "cubic-bezier(0.215, 0.61, 0.355, 1)", 81 | "value": [ 82 | { 83 | "property": "transform", 84 | "from": [ 85 | { 86 | "translateY": "-5px" 87 | } 88 | ], 89 | "to": [ 90 | { 91 | "translateY": "0" 92 | } 93 | ] 94 | } 95 | ] 96 | } 97 | ] 98 | } 99 | ] 100 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 0, 15 | "to": 1 16 | } 17 | ] 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInBottomLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "-100%", 17 | "translateY": "100%" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0", 23 | "translateY": "0" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "0", 30 | "to": "1" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInBottomRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "100%", 17 | "translateY": "100%" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0", 23 | "translateY": "0" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "0", 30 | "to": "1" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 0, 16 | "to": 1 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateY": "${distance && ('-' + distance) || '-100%'}" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateY": "0" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 0, 16 | "to": 1 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateX": "${distance && ('-' + distance) || '-100%'}" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateX": "0" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 0, 16 | "to": 1 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateX": "${distance || '100%'}" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateX": "0" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInTopLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "-100%", 17 | "translateY": "-100%" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0", 23 | "translateY": "0" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "0", 30 | "to": "1" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInTopRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "100%", 17 | "translateY": "-100%" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "0", 23 | "translateY": "0" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "0", 30 | "to": "1" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fade_entrances/fadeInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 0, 16 | "to": 1 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateY": "${distance || '100%'}" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateY": "0" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 1, 15 | "to": 0 16 | } 17 | ] 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutBottomLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0", 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "-100%", 23 | "translateY": "100%" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "1", 30 | "to": "0" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutBottomRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0", 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "100%", 23 | "translateY": "100%" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "1", 30 | "to": "0" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 1, 16 | "to": 0 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateY": "0" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateY": "${distance || '100%'}" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 1, 16 | "to": 0 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateX": "0" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateX": "${distance && ('-' + distance) || '-100%'}" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 1, 16 | "to": 0 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateX": "0" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateX": "${distance || '100%'}" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutTopLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0", 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "-100%", 23 | "translateY": "-100%" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "1", 30 | "to": "0" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutTopRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "0", 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "100%", 23 | "translateY": "-100%" 24 | } 25 | ] 26 | }, 27 | { 28 | "property": "opacity", 29 | "from": "1", 30 | "to": "0" 31 | } 32 | ] 33 | } 34 | ] 35 | } -------------------------------------------------------------------------------- /src/fading_exits/fadeOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 1, 16 | "to": 0 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "translateY": "0" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "translateY": "${distance && ('-' + distance) || '-100%'}" 28 | } 29 | ] 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "delay": "${delay || 0}", 10 | "duration": "${duration * 0.6}", 11 | "easing": "ease-out", 12 | "value": [ 13 | { 14 | "property": "opacity", 15 | "from": 0, 16 | "to": 1 17 | }, 18 | { 19 | "property": "transform", 20 | "from": [ 21 | { 22 | "skewX": -30 23 | }, 24 | { 25 | "translateX": "100vw" 26 | } 27 | ], 28 | "to": [ 29 | { 30 | "skewX": 20 31 | }, 32 | { 33 | "translateX": "0" 34 | } 35 | ] 36 | } 37 | ] 38 | }, 39 | { 40 | "type": "AnimateItem", 41 | "duration": "${duration * 0.2}", 42 | "easing": "ease-out", 43 | "value": [ 44 | { 45 | "property": "transform", 46 | "from": [ 47 | { 48 | "skewX": 20 49 | } 50 | ], 51 | "to": [ 52 | { 53 | "skewX": -5 54 | } 55 | ] 56 | } 57 | ] 58 | }, 59 | { 60 | "type": "AnimateItem", 61 | "duration": "${duration * 0.2}", 62 | "easing": "ease-out", 63 | "value": [ 64 | { 65 | "property": "transform", 66 | "from": [ 67 | { 68 | "skewX": -5 69 | } 70 | ], 71 | "to": [ 72 | { 73 | "skewX": 0 74 | } 75 | ] 76 | } 77 | ] 78 | } 79 | ] 80 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.6}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "-100%", 17 | "translateY": "0" 18 | }, 19 | { 20 | "skewX": 30 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "skewX": -20 26 | } 27 | ] 28 | }, 29 | { 30 | "property": "opacity", 31 | "from": "0", 32 | "to": "1" 33 | } 34 | ] 35 | }, 36 | { 37 | "type": "AnimateItem", 38 | "duration": "${duration * 0.2}", 39 | "value": [ 40 | { 41 | "property": "transform", 42 | "from": [ 43 | { 44 | "skewX": -20 45 | } 46 | ], 47 | "to": [ 48 | { 49 | "skewX": 5 50 | } 51 | ] 52 | } 53 | ] 54 | }, 55 | { 56 | "type": "AnimateItem", 57 | "duration": "${duration * 0.2}", 58 | "value": [ 59 | { 60 | "property": "transform", 61 | "from": [ 62 | { 63 | "skewX": 5 64 | } 65 | ], 66 | "to": [ 67 | { 68 | "translateX": "0", 69 | "translateY": "0" 70 | } 71 | ] 72 | } 73 | ] 74 | } 75 | ] 76 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.6}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "translateX": "100%", 17 | "translateY": "0" 18 | }, 19 | { 20 | "skewX": -30 21 | } 22 | ], 23 | "to": [ 24 | { 25 | "skewX": 20 26 | } 27 | ] 28 | }, 29 | { 30 | "property": "opacity", 31 | "from": "0", 32 | "to": "1" 33 | } 34 | ] 35 | }, 36 | { 37 | "type": "AnimateItem", 38 | "duration": "${duration * 0.2}", 39 | "value": [ 40 | { 41 | "property": "transform", 42 | "from": [ 43 | { 44 | "skewX": 20 45 | } 46 | ], 47 | "to": [ 48 | { 49 | "skewX": -5 50 | } 51 | ] 52 | } 53 | ] 54 | }, 55 | { 56 | "type": "AnimateItem", 57 | "duration": "${duration * 0.2}", 58 | "value": [ 59 | { 60 | "property": "transform", 61 | "from": [ 62 | { 63 | "skewX": -5 64 | } 65 | ], 66 | "to": [ 67 | { 68 | "translateX": "0", 69 | "translateY": "0" 70 | } 71 | ] 72 | } 73 | ] 74 | } 75 | ] 76 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "delay": "${delay || 0}", 11 | "duration": "${duration}", 12 | "easing": "ease-in", 13 | "value": [ 14 | { 15 | "property": "opacity", 16 | "from": 1, 17 | "to": 0 18 | }, 19 | { 20 | "property": "transform", 21 | "from": [ 22 | { 23 | "skewX": 0 24 | }, 25 | { 26 | "translateX": 0 27 | } 28 | ], 29 | "to": [ 30 | { 31 | "skewX": 30 32 | }, 33 | { 34 | "translateX": "${distance || '100vw'}" 35 | } 36 | ] 37 | } 38 | ] 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "to": [ 15 | { 16 | "translateX": "-100%", 17 | "translateY": "0" 18 | }, 19 | { 20 | "skewX": -30 21 | } 22 | ] 23 | }, 24 | { 25 | "property": "opacity", 26 | "from": "1", 27 | "to": "0" 28 | } 29 | ] 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /src/lightspeed/lightSpeedOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "to": [ 15 | { 16 | "translateX": "100%", 17 | "translateY": "0" 18 | }, 19 | { 20 | "skewX": 30 21 | } 22 | ] 23 | }, 24 | { 25 | "property": "opacity", 26 | "from": "1", 27 | "to": "0" 28 | } 29 | ] 30 | } 31 | ] 32 | } -------------------------------------------------------------------------------- /src/rotating_entrances/rotateIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 0, 15 | "to": 1 16 | }, 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "rotate": -200 22 | } 23 | ], 24 | "to": [ 25 | { 26 | "rotate": 0 27 | } 28 | ] 29 | } 30 | ] 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /src/rotating_entrances/rotateInDownLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "rotate": -45 17 | } 18 | ], 19 | "to": [ 20 | { 21 | "translateX": "0", 22 | "translateY": "0" 23 | } 24 | ] 25 | }, 26 | { 27 | "property": "opacity", 28 | "from": "0", 29 | "to": "1" 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/rotating_entrances/rotateInDownRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "rotate": 45 17 | } 18 | ], 19 | "to": [ 20 | { 21 | "translateX": "0", 22 | "translateY": "0" 23 | } 24 | ] 25 | }, 26 | { 27 | "property": "opacity", 28 | "from": "0", 29 | "to": "1" 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/rotating_entrances/rotateInUpLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "rotate": 45 17 | } 18 | ], 19 | "to": [ 20 | { 21 | "translateX": "0", 22 | "translateY": "0" 23 | } 24 | ] 25 | }, 26 | { 27 | "property": "opacity", 28 | "from": "0", 29 | "to": "1" 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/rotating_entrances/rotateInUpRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "from": [ 15 | { 16 | "rotate": -90 17 | } 18 | ], 19 | "to": [ 20 | { 21 | "translateX": "0", 22 | "translateY": "0" 23 | } 24 | ] 25 | }, 26 | { 27 | "property": "opacity", 28 | "from": "0", 29 | "to": "1" 30 | } 31 | ] 32 | } 33 | ] 34 | } -------------------------------------------------------------------------------- /src/rotating_exits/rotateOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 1, 15 | "to": 0 16 | }, 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "rotate": 0 22 | } 23 | ], 24 | "to": [ 25 | { 26 | "rotate": 200 27 | } 28 | ] 29 | } 30 | ] 31 | } 32 | ] 33 | } -------------------------------------------------------------------------------- /src/rotating_exits/rotateOutDownLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "to": [ 15 | { 16 | "rotate": 45 17 | } 18 | ] 19 | }, 20 | { 21 | "property": "opacity", 22 | "from": "1", 23 | "to": "0" 24 | } 25 | ] 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/rotating_exits/rotateOutDownRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "to": [ 15 | { 16 | "rotate": -45 17 | } 18 | ] 19 | }, 20 | { 21 | "property": "opacity", 22 | "from": "1", 23 | "to": "0" 24 | } 25 | ] 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/rotating_exits/rotateOutUpLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "to": [ 15 | { 16 | "rotate": -45 17 | } 18 | ] 19 | }, 20 | { 21 | "property": "opacity", 22 | "from": "1", 23 | "to": "0" 24 | } 25 | ] 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/rotating_exits/rotateOutUpRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 1}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "transform", 14 | "to": [ 15 | { 16 | "rotate": 90 17 | } 18 | ] 19 | }, 20 | { 21 | "property": "opacity", 22 | "from": "1", 23 | "to": "0" 24 | } 25 | ] 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /src/sliding_entrances/slideInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateY": "${distance && ('-' + distance) || '-100%'}" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": 0 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_entrances/slideInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateX": "${distance && ('-' + distance) || '-100%'}" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": 0 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_entrances/slideInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateX": "${distance || '100%'}" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": 0 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_entrances/slideInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateY": "${distance || '100%'}" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": 0 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_exits/slideOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": "${distance || '100%'}" 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_exits/slideOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateX": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "${distance && ('-' + distance) || '-100%'}" 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_exits/slideOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateX": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateX": "${distance || '100%'}" 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/sliding_exits/slideOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "translateY": "0" 18 | } 19 | ], 20 | "to": [ 21 | { 22 | "translateY": "${distance && ('-' + distance) || '-100%'}" 23 | } 24 | ] 25 | } 26 | ] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/specials/hinge.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.2}", 10 | "delay": "${delay || 0}", 11 | "easing": "ease-in-out", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "to": [ 16 | { 17 | "rotate": 80 18 | } 19 | ] 20 | } 21 | ] 22 | }, 23 | { 24 | "type": "AnimateItem", 25 | "duration": "${duration * 0.2}", 26 | "easing": "ease-in-out", 27 | "value": [ 28 | { 29 | "property": "transform", 30 | "from": [ 31 | { 32 | "rotate": 80 33 | } 34 | ], 35 | "to": [ 36 | { 37 | "rotate": 60 38 | } 39 | ] 40 | }, 41 | { 42 | "property": "opacity", 43 | "to": "1" 44 | } 45 | ] 46 | }, 47 | { 48 | "type": "AnimateItem", 49 | "duration": "${duration * 0.2}", 50 | "easing": "ease-in-out", 51 | "value": [ 52 | { 53 | "property": "transform", 54 | "from": [ 55 | { 56 | "rotate": 60 57 | } 58 | ], 59 | "to": [ 60 | { 61 | "rotate": 80 62 | } 63 | ] 64 | } 65 | ] 66 | }, 67 | { 68 | "type": "AnimateItem", 69 | "duration": "${duration * 0.2}", 70 | "easing": "ease-in-out", 71 | "value": [ 72 | { 73 | "property": "transform", 74 | "from": [ 75 | { 76 | "rotate": 80 77 | } 78 | ], 79 | "to": [ 80 | { 81 | "rotate": 60 82 | } 83 | ] 84 | }, 85 | { 86 | "property": "opacity", 87 | "to": "1" 88 | } 89 | ] 90 | }, 91 | { 92 | "type": "AnimateItem", 93 | "duration": "${duration * 0.2}", 94 | "value": [ 95 | { 96 | "property": "transform", 97 | "from": [ 98 | { 99 | "rotate": 60 100 | } 101 | ], 102 | "to": [ 103 | { 104 | "translateX": "0", 105 | "translateY": "700px" 106 | } 107 | ] 108 | }, 109 | { 110 | "property": "opacity", 111 | "from": "1", 112 | "to": "0" 113 | } 114 | ] 115 | } 116 | ] 117 | } -------------------------------------------------------------------------------- /src/specials/jackInTheBox.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.5}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 0, 15 | "to": 0.5 16 | }, 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "scaleX": 0.1, 22 | "scaleY": 0.1 23 | }, 24 | { 25 | "rotate": 30 26 | } 27 | ], 28 | "to": [ 29 | { 30 | "scaleX": 0.45, 31 | "scaleY": 0.45 32 | }, 33 | { 34 | "rotate": -10 35 | } 36 | ] 37 | } 38 | ] 39 | }, 40 | { 41 | "type": "AnimateItem", 42 | "duration": "${duration * 0.2}", 43 | "value": [ 44 | { 45 | "property": "opacity", 46 | "from": 0.5, 47 | "to": 0.7 48 | }, 49 | { 50 | "property": "transform", 51 | "from": [ 52 | { 53 | "scaleX": 0.45, 54 | "scaleY": 0.45 55 | }, 56 | { 57 | "rotate": -10 58 | } 59 | ], 60 | "to": [ 61 | { 62 | "scaleX": 0.63, 63 | "scaleY": 0.63 64 | }, 65 | { 66 | "rotate": 3 67 | } 68 | ] 69 | } 70 | ] 71 | }, 72 | { 73 | "type": "AnimateItem", 74 | "duration": "${duration * 0.3}", 75 | "value": [ 76 | { 77 | "property": "opacity", 78 | "from": 0.7, 79 | "to": 1 80 | }, 81 | { 82 | "property": "transform", 83 | "from": [ 84 | { 85 | "scaleX": 0.63, 86 | "scaleY": 0.63 87 | }, 88 | { 89 | "rotate": 3 90 | } 91 | ], 92 | "to": [ 93 | { 94 | "scaleX": 1, 95 | "scaleY": 1 96 | }, 97 | { 98 | "rotate": 0 99 | } 100 | ] 101 | } 102 | ] 103 | } 104 | ] 105 | } -------------------------------------------------------------------------------- /src/specials/rollIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 0, 15 | "to": 1 16 | }, 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "translateX": "-100%" 22 | }, 23 | { 24 | "rotate": -120 25 | } 26 | ], 27 | "to": [ 28 | { 29 | "translateX": "0" 30 | }, 31 | { 32 | "rotate": 0 33 | } 34 | ] 35 | } 36 | ] 37 | } 38 | ] 39 | } -------------------------------------------------------------------------------- /src/specials/rollOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "to": 0 15 | }, 16 | { 17 | "property": "transform", 18 | "from": [ 19 | { 20 | "translateX": "0" 21 | }, 22 | { 23 | "rotate": 0 24 | } 25 | ], 26 | "to": [ 27 | { 28 | "translateX": "100%" 29 | }, 30 | { 31 | "rotate": 120 32 | } 33 | ] 34 | } 35 | ] 36 | } 37 | ] 38 | } -------------------------------------------------------------------------------- /src/zooming_entrances/zoomIn.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.5}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 0, 15 | "to": 1 16 | }, 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "scaleX": 0.3, 22 | "scaleY": 0.3 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "scaleX": 0.65, 28 | "scaleY": 0.65 29 | } 30 | ] 31 | } 32 | ] 33 | }, 34 | { 35 | "type": "AnimateItem", 36 | "duration": "${duration * 0.5}", 37 | "value": [ 38 | { 39 | "property": "transform", 40 | "from": [ 41 | { 42 | "scaleX": 0.65, 43 | "scaleY": 0.65 44 | } 45 | ], 46 | "to": [ 47 | { 48 | "scaleX": 1, 49 | "scaleY": 1 50 | } 51 | ] 52 | } 53 | ] 54 | } 55 | ] 56 | } -------------------------------------------------------------------------------- /src/zooming_entrances/zoomInDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.6}", 11 | "delay": "${delay || 0}", 12 | "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", 13 | "value": [ 14 | { 15 | "property": "opacity", 16 | "from": 0, 17 | "to": 1 18 | }, 19 | { 20 | "property": "transform", 21 | "from": [ 22 | { 23 | "scaleX": 0.1, 24 | "scaleY": 0.1 25 | }, 26 | { 27 | "translateY": "${distance && ('-' + distance) || '-100vh'}" 28 | } 29 | ], 30 | "to": [ 31 | { 32 | "scaleX": 0.475, 33 | "scaleY": 0.475 34 | }, 35 | { 36 | "translateY": "60px" 37 | } 38 | ] 39 | } 40 | ] 41 | }, 42 | { 43 | "type": "AnimateItem", 44 | "duration": "${duration * 0.4}", 45 | "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)", 46 | "value": [ 47 | { 48 | "property": "transform", 49 | "from": [ 50 | { 51 | "scaleX": 0.475, 52 | "scaleY": 0.475 53 | }, 54 | { 55 | "translateY": "60px" 56 | } 57 | ], 58 | "to": [ 59 | { 60 | "scaleX": 1, 61 | "scaleY": 1 62 | }, 63 | { 64 | "translateY": "0" 65 | } 66 | ] 67 | } 68 | ] 69 | } 70 | ] 71 | } -------------------------------------------------------------------------------- /src/zooming_entrances/zoomInLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.6}", 11 | "delay": "${delay || 0}", 12 | "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", 13 | "value": [ 14 | { 15 | "property": "opacity", 16 | "from": 0, 17 | "to": 1 18 | }, 19 | { 20 | "property": "transform", 21 | "from": [ 22 | { 23 | "scaleX": 0.1, 24 | "scaleY": 0.1 25 | }, 26 | { 27 | "translateX": "${distance && ('-' + distance) || '-100vw'}" 28 | } 29 | ], 30 | "to": [ 31 | { 32 | "scaleX": 0.475, 33 | "scaleY": 0.475 34 | }, 35 | { 36 | "translateX": "10px" 37 | } 38 | ] 39 | } 40 | ] 41 | }, 42 | { 43 | "type": "AnimateItem", 44 | "duration": "${duration * 0.4}", 45 | "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)", 46 | "value": [ 47 | { 48 | "property": "transform", 49 | "from": [ 50 | { 51 | "scaleX": 0.475, 52 | "scaleY": 0.475 53 | }, 54 | { 55 | "translateX": "10px" 56 | } 57 | ], 58 | "to": [ 59 | { 60 | "scaleX": 1, 61 | "scaleY": 1 62 | }, 63 | { 64 | "translateX": "0" 65 | } 66 | ] 67 | } 68 | ] 69 | } 70 | ] 71 | } -------------------------------------------------------------------------------- /src/zooming_entrances/zoomInRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.6}", 11 | "delay": "${delay || 0}", 12 | "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", 13 | "value": [ 14 | { 15 | "property": "opacity", 16 | "from": 0, 17 | "to": 1 18 | }, 19 | { 20 | "property": "transform", 21 | "from": [ 22 | { 23 | "scaleX": 0.1, 24 | "scaleY": 0.1 25 | }, 26 | { 27 | "translateX": "${distance || '100vw'}" 28 | } 29 | ], 30 | "to": [ 31 | { 32 | "scaleX": 0.475, 33 | "scaleY": 0.475 34 | }, 35 | { 36 | "translateX": "-10px" 37 | } 38 | ] 39 | } 40 | ] 41 | }, 42 | { 43 | "type": "AnimateItem", 44 | "duration": "${duration * 0.4}", 45 | "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)", 46 | "value": [ 47 | { 48 | "property": "transform", 49 | "from": [ 50 | { 51 | "scaleX": 0.475, 52 | "scaleY": 0.475 53 | }, 54 | { 55 | "translateY": "-10px" 56 | } 57 | ], 58 | "to": [ 59 | { 60 | "scaleX": 1, 61 | "scaleY": 1 62 | }, 63 | { 64 | "translateY": "0" 65 | } 66 | ] 67 | } 68 | ] 69 | } 70 | ] 71 | } -------------------------------------------------------------------------------- /src/zooming_entrances/zoomInUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.6}", 11 | "delay": "${delay || 0}", 12 | "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", 13 | "value": [ 14 | { 15 | "property": "opacity", 16 | "from": 0, 17 | "to": 1 18 | }, 19 | { 20 | "property": "transform", 21 | "from": [ 22 | { 23 | "scaleX": 0.1, 24 | "scaleY": 0.1 25 | }, 26 | { 27 | "translateY": "${distance || '100vh'}" 28 | } 29 | ], 30 | "to": [ 31 | { 32 | "scaleX": 0.475, 33 | "scaleY": 0.475 34 | }, 35 | { 36 | "translateY": "-60px" 37 | } 38 | ] 39 | } 40 | ] 41 | }, 42 | { 43 | "type": "AnimateItem", 44 | "duration": "${duration * 0.4}", 45 | "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)", 46 | "value": [ 47 | { 48 | "property": "transform", 49 | "from": [ 50 | { 51 | "scaleX": 0.475, 52 | "scaleY": 0.475 53 | }, 54 | { 55 | "translateY": "-60px" 56 | } 57 | ], 58 | "to": [ 59 | { 60 | "scaleX": 1, 61 | "scaleY": 1 62 | }, 63 | { 64 | "translateY": "0" 65 | } 66 | ] 67 | } 68 | ] 69 | } 70 | ] 71 | } -------------------------------------------------------------------------------- /src/zooming_exits/zoomOut.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "delay" 5 | ], 6 | "commands": [ 7 | { 8 | "type": "AnimateItem", 9 | "duration": "${duration * 0.5}", 10 | "delay": "${delay || 0}", 11 | "value": [ 12 | { 13 | "property": "opacity", 14 | "from": 1, 15 | "to": 0 16 | }, 17 | { 18 | "property": "transform", 19 | "from": [ 20 | { 21 | "scaleX": 1, 22 | "scaleY": 1 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "scaleX": 0.3, 28 | "scaleY": 0.3 29 | } 30 | ] 31 | } 32 | ] 33 | }, 34 | { 35 | "type": "Idle", 36 | "delay": "${duration * 0.5}" 37 | } 38 | ] 39 | } -------------------------------------------------------------------------------- /src/zooming_exits/zoomOutDown.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.4}", 11 | "delay": "${delay || 0}", 12 | "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", 13 | "value": [ 14 | { 15 | "property": "transform", 16 | "from": [ 17 | { 18 | "scaleX": 1, 19 | "scaleY": 1 20 | }, 21 | { 22 | "translateY": "0" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "scaleX": 0.475, 28 | "scaleY": 0.475 29 | }, 30 | { 31 | "translateY": "-60px" 32 | } 33 | ] 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.6}", 40 | "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)", 41 | "value": [ 42 | { 43 | "property": "opacity", 44 | "from": 1, 45 | "to": 0 46 | }, 47 | { 48 | "property": "transform", 49 | "from": [ 50 | { 51 | "scaleX": 0.475, 52 | "scaleY": 0.475 53 | }, 54 | { 55 | "translateY": "-60px" 56 | } 57 | ], 58 | "to": [ 59 | { 60 | "scaleX": 0.1, 61 | "scaleY": 0.1 62 | }, 63 | { 64 | "translateY": "${distance || '100vh'}" 65 | } 66 | ] 67 | } 68 | ] 69 | } 70 | ] 71 | } -------------------------------------------------------------------------------- /src/zooming_exits/zoomOutLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.4}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "scaleX": 1, 18 | "scaleY": 1 19 | }, 20 | { 21 | "translateX": "0" 22 | } 23 | ], 24 | "to": [ 25 | { 26 | "scaleX": 0.475, 27 | "scaleY": 0.475 28 | }, 29 | { 30 | "translateX": "42px" 31 | } 32 | ] 33 | } 34 | ] 35 | }, 36 | { 37 | "type": "AnimateItem", 38 | "duration": "${duration * 0.6}", 39 | "value": [ 40 | { 41 | "property": "opacity", 42 | "from": 1, 43 | "to": 0 44 | }, 45 | { 46 | "property": "transform", 47 | "from": [ 48 | { 49 | "scaleX": 0.475, 50 | "scaleY": 0.475 51 | }, 52 | { 53 | "translateX": "42px" 54 | } 55 | ], 56 | "to": [ 57 | { 58 | "scaleX": 0.1, 59 | "scaleY": 0.1 60 | }, 61 | { 62 | "translateX": "${distance && ('-' + distance) || '-200vw'}" 63 | } 64 | ] 65 | } 66 | ] 67 | } 68 | ] 69 | } -------------------------------------------------------------------------------- /src/zooming_exits/zoomOutRight.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.4}", 11 | "delay": "${delay || 0}", 12 | "value": [ 13 | { 14 | "property": "transform", 15 | "from": [ 16 | { 17 | "scaleX": 1, 18 | "scaleY": 1 19 | }, 20 | { 21 | "translateX": "0" 22 | } 23 | ], 24 | "to": [ 25 | { 26 | "scaleX": 0.475, 27 | "scaleY": 0.475 28 | }, 29 | { 30 | "translateX": "-42px" 31 | } 32 | ] 33 | } 34 | ] 35 | }, 36 | { 37 | "type": "AnimateItem", 38 | "duration": "${duration * 0.6}", 39 | "value": [ 40 | { 41 | "property": "opacity", 42 | "from": 1, 43 | "to": 0 44 | }, 45 | { 46 | "property": "transform", 47 | "from": [ 48 | { 49 | "scaleX": 0.475, 50 | "scaleY": 0.475 51 | }, 52 | { 53 | "translateX": "-42px" 54 | } 55 | ], 56 | "to": [ 57 | { 58 | "scaleX": 0.1, 59 | "scaleY": 0.1 60 | }, 61 | { 62 | "translateX": "200vw" 63 | } 64 | ] 65 | } 66 | ] 67 | } 68 | ] 69 | } -------------------------------------------------------------------------------- /src/zooming_exits/zoomOutUp.json: -------------------------------------------------------------------------------- 1 | { 2 | "parameters": [ 3 | "duration", 4 | "distance", 5 | "delay" 6 | ], 7 | "commands": [ 8 | { 9 | "type": "AnimateItem", 10 | "duration": "${duration * 0.4}", 11 | "delay": "${delay || 0}", 12 | "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)", 13 | "value": [ 14 | { 15 | "property": "transform", 16 | "from": [ 17 | { 18 | "scaleX": 1, 19 | "scaleY": 1 20 | }, 21 | { 22 | "translateY": "0" 23 | } 24 | ], 25 | "to": [ 26 | { 27 | "scaleX": 0.475, 28 | "scaleY": 0.475 29 | }, 30 | { 31 | "translateY": "60px" 32 | } 33 | ] 34 | } 35 | ] 36 | }, 37 | { 38 | "type": "AnimateItem", 39 | "duration": "${duration * 0.6}", 40 | "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)", 41 | "value": [ 42 | { 43 | "property": "opacity", 44 | "from": 1, 45 | "to": 0 46 | }, 47 | { 48 | "property": "transform", 49 | "from": [ 50 | { 51 | "scaleX": 0.475, 52 | "scaleY": 0.475 53 | }, 54 | { 55 | "translateY": "60px" 56 | } 57 | ], 58 | "to": [ 59 | { 60 | "scaleX": 0.1, 61 | "scaleY": 0.1 62 | }, 63 | { 64 | "translateY": "${distance && ('-' + distance) || '-200vh'}" 65 | } 66 | ] 67 | } 68 | ] 69 | } 70 | ] 71 | } --------------------------------------------------------------------------------