├── .eslintrc.json ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.json ├── rollup.config.js └── src └── index.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "rules": { 4 | "indent": [ 5 | 2, 6 | "tab", 7 | { 8 | "SwitchCase": 1 9 | } 10 | ], 11 | "semi": [ 12 | 2, 13 | "always" 14 | ], 15 | "keyword-spacing": [ 16 | 2, 17 | { 18 | "before": true, 19 | "after": true 20 | } 21 | ], 22 | "space-before-blocks": [ 23 | 2, 24 | "always" 25 | ], 26 | "no-mixed-spaces-and-tabs": [ 27 | 2, 28 | "smart-tabs" 29 | ], 30 | "no-cond-assign": 0, 31 | "no-unused-vars": 2, 32 | "object-shorthand": [ 33 | 2, 34 | "always" 35 | ], 36 | "no-const-assign": 2, 37 | "no-class-assign": 2, 38 | "no-this-before-super": 2, 39 | "no-var": 2, 40 | "no-unreachable": 2, 41 | "valid-typeof": 2, 42 | "quote-props": [ 43 | 2, 44 | "as-needed" 45 | ], 46 | "one-var": [ 47 | 2, 48 | "never" 49 | ], 50 | "prefer-arrow-callback": 2, 51 | "prefer-const": [ 52 | 2, 53 | { 54 | "destructuring": "all" 55 | } 56 | ], 57 | "arrow-spacing": 2, 58 | "no-inner-declarations": 0 59 | }, 60 | "env": { 61 | "es6": true, 62 | "browser": true, 63 | "node": true, 64 | "mocha": true 65 | }, 66 | "extends": [ 67 | "eslint:recommended", 68 | "plugin:import/errors", 69 | "plugin:import/warnings" 70 | ], 71 | "parserOptions": { 72 | "ecmaVersion": 6, 73 | "sourceType": "module" 74 | }, 75 | "settings": { 76 | "import/core-modules": [ 77 | "svelte" 78 | ] 79 | } 80 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | index.js 4 | !src/index.js 5 | module.js 6 | yarn.lock -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # svelte-transitions-draw changelog 2 | 3 | ## 1.0.0 4 | 5 | * First release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 Rich Harris 2 | 3 | Permission is hereby granted by the authors of this software, to any person, to use the software for any purpose, free of charge, including the rights to run, read, copy, change, distribute and sell it, and including usage rights to any patents the authors may hold on it, subject to the following conditions: 4 | 5 | This license, or a link to its text, must be included with all copies of the software and any derivative works. 6 | 7 | Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license. 8 | 9 | The software is provided "as is", without warranty of any kind, including but not limited to the warranties of title, fitness, merchantability and non-infringement. The authors have no obligation to provide support or updates for the software, and may not be held liable for any damages, claims or other liability arising from its use. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## DEPRECATED — As of Svelte v3, transitions are built into the main package 2 | 3 | # svelte-transitions-draw ([demo](https://svelte.technology/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50)) 4 | 5 | Draw transition plugin for [Svelte](https://svelte.technology). 6 | 7 | This transition will only work with `` elements. 8 | 9 | ![draw](https://user-images.githubusercontent.com/1162160/40150651-d3451460-5948-11e8-8a8b-1986776a414e.gif) 10 | 11 | ## Usage 12 | 13 | Recommended usage is via [svelte-transitions](https://github.com/sveltejs/svelte-transitions), but you can use this module directly if you prefer. Note that it assumes an ES module or CommonJS environment. 14 | 15 | Install with npm or yarn: 16 | 17 | ```bash 18 | npm install --save svelte-transitions-draw 19 | ``` 20 | 21 | Then add the plugin to your Svelte component's exported definition: 22 | 23 | ```html 24 | 27 | 28 | 29 | {#if visible} 30 | 31 | {/if} 32 | 33 | 34 | 41 | ``` 42 | 43 | 44 | ## Parameters 45 | 46 | As with most transitions, you can specify `delay` and `duration` parameters (both in milliseconds) and a custom `easing` function (which should live on your `helpers`): 47 | 48 | ```html 49 | 53 | 54 | 63 | ``` 64 | 65 | 66 | ## License 67 | 68 | [LIL](LICENSE) 69 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-transitions-draw", 3 | "version": "1.0.0", 4 | "description": "Draw transition plugin for Svelte", 5 | "main": "index.js", 6 | "module": "module.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "build": "rollup -c", 10 | "prepublish": "npm run lint && npm run build", 11 | "lint": "eslint src" 12 | }, 13 | "files": [ 14 | "index.js", 15 | "module.js" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/sveltejs/svelte-transitions-draw.git" 20 | }, 21 | "keywords": [ 22 | "svelte", 23 | "transitions", 24 | "css", 25 | "animation" 26 | ], 27 | "author": "Rich Harris", 28 | "license": "LIL", 29 | "bugs": { 30 | "url": "https://github.com/sveltejs/svelte-transitions-draw/issues" 31 | }, 32 | "homepage": "https://github.com/sveltejs/svelte-transitions-draw#readme", 33 | "devDependencies": { 34 | "eslint": "^4.19.1", 35 | "eslint-plugin-import": "^2.2.0", 36 | "rollup": "^0.59.1", 37 | "rollup-plugin-buble": "^0.19.2" 38 | }, 39 | "dependencies": { 40 | "eases-jsnext": "^1.0.9" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import pkg from './package.json'; 2 | 3 | export default { 4 | input: 'src/index.js', 5 | output: [ 6 | { file: pkg.main, format: 'cjs' }, 7 | { file: pkg.module, format: 'es' } 8 | ], 9 | external: ['eases-jsnext'] 10 | }; 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { cubicInOut } from 'eases-jsnext'; 2 | 3 | export default function draw(node, params) { 4 | const len = node.getTotalLength(); 5 | 6 | return { 7 | delay: params.delay, 8 | duration: params.duration || 800, 9 | easing: params.easing || cubicInOut, 10 | css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}` 11 | }; 12 | } --------------------------------------------------------------------------------