jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovation

Browse source
This commit is contained in:
Ilya Kantor 2015-03-05 19:14:51 +03:00
parent 951cf3f2ec
commit 2022aafc13
72 changed files with 98 additions and 1411 deletions
Download patch file Download diff file Expand all files Collapse all files

26
5-animation/3-js-animation/back.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>back.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="back.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 82.5458318,209.484914 105.066994,208.643536 C127.588155,207.802158 166.326582,214.914724 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>back.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s47.216 15.85 69.737 15.008c22.52-.842 61.26 6.27 103.4-186.198" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1 KiB

Before After
Before After

21
5-animation/3-js-animation/bezier-linear.svg
View file

@ -1,20 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="149px" height="187px" viewBox="0 0 149 187" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bezier2.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bezier2.svg" sketch:type="MSArtboardGroup">
<path d="M24.1700721,143.347957 L124.314002,43.5051082" id="Path-6" stroke="#CB1E31" stroke-width="2" sketch:type="MSShapeGroup"></path>
<circle id="Oval-1" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="24" cy="144" r="4"></circle>
<text id="1" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="20" y="165">1</tspan>
</text>
<circle id="Oval-2" stroke="#E8C48E" fill="#FFFFFF" sketch:type="MSShapeGroup" cx="124" cy="44" r="4"></circle>
<text id="2" sketch:type="MSTextLayer" font-family="Open Sans" font-size="14" font-weight="526" sketch:alignment="middle" line-spacing="17" fill="#8A704D">
<tspan x="120.100962" y="65">2</tspan>
</text>
</g>
</g>
</svg>
<svg width="149" height="187" viewBox="0 0 149 187" xmlns="http://www.w3.org/2000/svg"><title>bezier2.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M24.17 143.348l100.144-99.843" stroke="#CB1E31" stroke-width="2"/><circle stroke="#E8C48E" fill="#fff" cx="24" cy="144" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="20" y="165">1</tspan></text><circle stroke="#E8C48E" fill="#fff" cx="124" cy="44" r="4"/><text font-family="Open Sans" font-size="14" font-weight="526" fill="#8A704D"><tspan x="120.101" y="65">2</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 632 B

Before After
Before After

27
5-animation/3-js-animation/bounce-inout.svg
View file

@ -1,26 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>bounce-inout.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="bounce-inout.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 41.2333124,187.095281 52.2325098,193.635839 C55.4414764,183.659866 71.0514816,178.107189 80.7686063,193.635839 C89.032676,167.620814 117,110.452183 144.182478,194.552328 C148.063747,176.586161 175.037321,10.6423763 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
<path d="M35.4840461,192.776816 C53.45735,186.177656 69.3490979,170.128038 97.137513,18.4980531 C102.051415,32.4334475 112.013077,63.0795933 127.058929,63.996791 C142.104781,64.9139886 156.560556,31.0473534 160.222221,20.3348259 C166.618848,28.1959597 165.111566,31.4251632 174.958382,31.425163 C184.805198,31.4251628 190.347191,21.8729943 191.581215,20.6199652 C193.7855,22.5969315 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>bounce-inout.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s5.903-6.54 16.903 0c3.208-9.976 18.818-15.53 28.536 0 8.262-26.015 36.23-83.184 63.41.916 3.883-17.966 30.856-183.91 64.285-172.106" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text><path d="M35.484 192.777c17.973-6.6 33.865-22.65 61.654-174.28 4.913 13.936 14.875 44.583 29.92 45.5 15.047.917 29.503-32.95 33.164-43.662 6.397 7.86 4.89 11.09 14.736 11.09 9.847 0 15.39-9.552 16.623-10.805 2.207 1.977 10.598 3.784 15.38.83" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

28
5-animation/3-js-animation/circ-ease.svg
View file

@ -1,27 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>circ-ease.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="circ-ease.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
<path d="M35.1598321,193.734972 C116.357678,193.734973 200.574538,141.537458 208.465749,22.4456533" id="Path-748" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup" transform="translate(121.812790, 108.090312) scale(-1, -1) translate(-121.812790, -108.090312) "></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
<path d="M35.4840461,192.776816 C53.45735,186.177656 112.052703,195.594079 121.221885,109.458253 C130.391067,23.3224269 202.177314,24.4036062 206.959731,21.4508296" id="Path-770" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel" sketch:type="MSShapeGroup"></path>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>circ-ease.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.16 193.735c81.198 0 165.415-52.198 173.306-171.29" stroke="#EE6B47" stroke-width="3" stroke-linejoin="bevel"/><path d="M208.466 22.445c-81.198 0-165.415 52.198-173.306 171.29" stroke="#8DB173" stroke-width="3" stroke-linejoin="bevel"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text><path d="M35.484 192.777c17.973-6.6 76.57 2.817 85.738-83.32 9.17-86.135 80.955-85.053 85.738-88.006" stroke="#62C0DC" stroke-width="3" stroke-linejoin="bevel"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before After
Before After

26
5-animation/3-js-animation/circ.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>circ.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="circ.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 189.874769,197.008001 208.465749,22.4456533" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>circ.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s154.545 3.372 173.136-171.19" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 999 B

Before After
Before After

26
5-animation/3-js-animation/elastic.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="233px" height="388px" viewBox="0 0 233 388" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>elastic.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="elastic.svg" sketch:type="MSArtboardGroup">
<path d="M34,365 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,23 C32.95,26.78 32.05,30.02 31,33.8 C33.1,33.8 34.9,33.8 37,33.8 C35.95,30.02 35.05,26.78 34,23 C34,23 34,23 34,23 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M34.8792035,192.69782 C38.3217915,192.697818 46.5362784,191.195974 53.4936997,193.038137 C62.0206897,195.295885 61.5154635,189.622956 87.0139157,194.339254 C100.114357,196.762365 100.423927,183.608251 115.161483,194.900075 C135.318831,210.34451 133.877092,159.362737 148.519851,194.677907 C151.940119,202.926853 155.398942,217.279032 158.65332,214.286779 C161.563227,211.611251 163.848094,194.907207 173.23036,150.175435 C177.841468,128.191083 188.232669,296.296579 192.347319,280.535848 C201.966406,243.690946 203.555755,39.1411041 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg width="233" height="388" viewBox="0 0 233 388" xmlns="http://www.w3.org/2000/svg"><title>elastic.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 365V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 23l-3 10.8h6L34 23z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34.88 192.698c3.442 0 11.656-1.502 18.614.34 8.527 2.258 8.02-3.415 33.52 1.3 13.1 2.424 13.41-10.73 28.147.562 20.16 15.445 18.718-35.537 33.36-.222 3.42 8.25 6.88 22.6 10.134 19.61 2.91-2.677 5.195-19.38 14.577-64.113 4.61-21.984 15.004 146.122 19.118 130.36 9.62-36.844 11.21-241.394 14.99-258.44" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before After
Before After

26
5-animation/3-js-animation/linear.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>linear.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="linear.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.3289777,193.635841 L207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>linear.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636L207.336 22.094" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 987 B

Before After
Before After

26
5-animation/3-js-animation/quad.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>quad.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="quad.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.3289777,193.635841 C35.3289777,193.635841 113.802694,208.841146 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>quad.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636s78.473 15.205 172.007-171.542" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,000 B

Before After
Before After

26
5-animation/3-js-animation/quint.svg
View file

@ -1,25 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="234px" height="240px" viewBox="0 0 234 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>quint.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="quint.svg" sketch:type="MSArtboardGroup">
<path d="M34,209.5 L34,22.1600037" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M34,22.5 C32.95,26.28 32.05,29.52 31,33.3 C33.1,33.3 34.9,33.3 37,33.3 C35.95,29.52 35.05,26.28 34,22.5 C34,22.5 34,22.5 34,22.5 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M24.5,194 L208.509995,194" id="Line" stroke="#E8C48E" stroke-width="2" stroke-linecap="square" sketch:type="MSShapeGroup"></path>
<path id="Line-decoration-1" d="M208.5,194 C204.72,192.95 201.48,192.05 197.7,191 C197.7,193.1 197.7,194.9 197.7,197 C201.48,195.95 204.72,195.05 208.5,194 C208.5,194 208.5,194 208.5,194 Z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"></path>
<path d="M35.3289777,193.635841 C149.458906,196.88389 171.361738,184.274633 207.337233,22.0938619" id="Path-747" stroke="#EE6B47" stroke-width="3" sketch:type="MSShapeGroup"></path>
<text id="0" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="212">0</tspan>
</text>
<text id="1" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="17" y="36">1</tspan>
</text>
<text id="-2" sketch:type="MSTextLayer" font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D">
<tspan x="200" y="212">1</tspan>
</text>
</g>
</g>
</svg>
<svg width="234" height="240" viewBox="0 0 234 240" xmlns="http://www.w3.org/2000/svg"><title>quint.svg</title><desc>Created with bin/sketchtool.</desc><g fill="none" fill-rule="evenodd"><path d="M34 209.5V22.16" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M34 22.5l-3 10.8h6l-3-10.8z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M24.5 194h184.01" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M208.5 194l-10.8-3v6l10.8-3z" stroke="#E8C48E" stroke-width="2" stroke-linecap="square"/><path d="M35.33 193.636c114.13 3.248 136.032-9.36 172.007-171.542" stroke="#EE6B47" stroke-width="3"/><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="212">0</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="17" y="36">1</tspan></text><text font-family="Consolas" font-size="14" font-weight="bold" fill="#8A704D"><tspan x="200" y="212">1</tspan></text></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1,013 B

Before After
Before After