2b:null 2c:["$","title",null,{"children":"Animation controls | Patrick Brockmann | Observable"}] 31:Tf7a,async function animationControls() { const firstButton = html``; const prevButton = html``; const reverseButton = html``; const pauseButton = html``; const playButton = html``; const nextButton = html``; const lastButton = html``; const slowerButton = html``; const fasterButton = html``; const onceRadio = html`Once`; const loopRadio = html`Loop`; const reflectRadio = html`Reflect`; firstButton.onclick = function(event) { mutable animationPlay = false; mutable animationForward = false; mutable lindex = 1; }; prevButton.onclick = function(event) { mutable animationPlay = false; mutable animationForward = false; if (lindex > 1) { mutable lindex--; } }; reverseButton.onclick = function(event) { mutable animationPlay = false; mutable animationForward = true; }; pauseButton.onclick = function(event) { mutable animationPlay = false; mutable animationForward = false; }; playButton.onclick = function(event) { mutable animationPlay = true; mutable animationForward = false; }; nextButton.onclick = function(event) { mutable animationPlay = false; mutable animationForward = false; if (lindex < llast) { mutable lindex++; } }; lastButton.onclick = function(event) { mutable lindex = llast; mutable animationPlay = false; mutable animationForward = false; }; slowerButton.onclick = function(event) { mutable animationSpeed += 100; }; fasterButton.onclick = function(event) { if (animationSpeed > 0) mutable animationSpeed -= 100; }; onceRadio.onclick = function(event) { mutable animationType = "once"; }; loopRadio.onclick = function(event) { mutable animationType = "loop"; }; reflectRadio.onclick = function(event) { mutable animationType = "reflect"; }; return html`

${firstButton} ${prevButton} ${reverseButton} ${pauseButton} ${playButton} ${nextButton} ${lastButton}

${slowerButton} ${fasterButton}

${onceRadio} ${loopRadio} ${reflectRadio}

`; }32:[{"id":"6b788fe5c006b3de88ab79c5c394cb7cec678efe7ef096109c069d4807cc8662bec20449560cef624039ab2a7cd2b93c321e733a05485fdef24b0c7cfdfb6cc1","href":"https://static.observableusercontent.com/files/6b788fe5c006b3de88ab79c5c394cb7cec678efe7ef096109c069d4807cc8662bec20449560cef624039ab2a7cd2b93c321e733a05485fdef24b0c7cfdfb6cc1","name":"image_12.gif","type":"image/gif","lastModified":1600185673576.195,"size":19775},{"id":"b3f5438d0ad2eda827f9e2cb76883f9101e26e37a409f99e72de26a76228441187a9f40143b0ffc5894641e09ff242a6bddaad5c1adecf7d06cfd904933700a7","href":"https://static.observableusercontent.com/files/b3f5438d0ad2eda827f9e2cb76883f9101e26e37a409f99e72de26a76228441187a9f40143b0ffc5894641e09ff242a6bddaad5c1adecf7d06cfd904933700a7","name":"image_1.gif","type":"image/gif","lastModified":1600185673578.455,"size":21336},{"id":"bd9edb4237c05ed7c168352b8334784c1f8118dfd482af65b2fdd2a1e2f8e134021ac5ef13ceb15749898d5c907101e636675a7fe773a84ca21909ce0f7c38ed","href":"https://static.observableusercontent.com/files/bd9edb4237c05ed7c168352b8334784c1f8118dfd482af65b2fdd2a1e2f8e134021ac5ef13ceb15749898d5c907101e636675a7fe773a84ca21909ce0f7c38ed","name":"image_9.gif","type":"image/gif","lastModified":1600185673592.992,"size":25490},{"id":"af679de60a490863c582712869b2d0fe1c44db11cca098ab819f4429c22a6049d430ceb5de1b423b2fb6a6da395cea5964e808e9cb5d677971c0468e1ecad125","href":"https://static.observableusercontent.com/files/af679de60a490863c582712869b2d0fe1c44db11cca098ab819f4429c22a6049d430ceb5de1b423b2fb6a6da395cea5964e808e9cb5d677971c0468e1ecad125","name":"image_3.gif","type":"image/gif","lastModified":1600185673593.725,"size":22185},{"id":"bf780b2aa77d626f9c17b307358cdc4f66b48ee4a058e0b30e80930074fde77b4f06dbf6cf38968536341fdddbefd994f73a9ab854644ce0d87670981f1c7977","href":"https://static.observableusercontent.com/files/bf780b2aa77d626f9c17b307358cdc4f66b48ee4a058e0b30e80930074fde77b4f06dbf6cf38968536341fdddbefd994f73a9ab854644ce0d87670981f1c7977","name":"image_4.gif","type":"image/gif","lastModified":1600185673755.6,"size":24955},{"id":"67d53a43a49a9c1c3e2e1d7a587508b8d390702b721a00ba511adcfe00f011b7c71826d9c9daa92f027d06c4909f6efd2f72bb9e0c4603ac136bdc319acf5d53","href":"https://static.observableusercontent.com/files/67d53a43a49a9c1c3e2e1d7a587508b8d390702b721a00ba511adcfe00f011b7c71826d9c9daa92f027d06c4909f6efd2f72bb9e0c4603ac136bdc319acf5d53","name":"image_11.gif","type":"image/gif","lastModified":1600185673757.574,"size":24463},{"id":"6c2d793b910e0a4cc2878ee8524ae938d1871cc7286dfdea0c832139266ea6e00a2f6d5d6dc21787a8b23ea8e473540e324cbbe58a4699aeacc6c94d7bf89a0a","href":"https://static.observableusercontent.com/files/6c2d793b910e0a4cc2878ee8524ae938d1871cc7286dfdea0c832139266ea6e00a2f6d5d6dc21787a8b23ea8e473540e324cbbe58a4699aeacc6c94d7bf89a0a","name":"last.png","type":"image/png","lastModified":1600082470960.426,"size":427},{"id":"1d9f1187d202f4ef218b30b98dd3dd8fd382d1098cff8909b5bcaccf4c7c284d2eec3b0f757b1facb6c391472608d4becd19378644a78bb648b7267b455b28da","href":"https://static.observableusercontent.com/files/1d9f1187d202f4ef218b30b98dd3dd8fd382d1098cff8909b5bcaccf4c7c284d2eec3b0f757b1facb6c391472608d4becd19378644a78bb648b7267b455b28da","name":"next.png","type":"image/png","lastModified":1600082470960.426,"size":324},{"id":"8db2d5709ca5bb884fd8187f2f4238f05dfe44d8eb701301f1984407e1a548f8afc87ac112e2db4a8e14c0293b126a1dfa54f14b2f46b84c57a9574d1834f5a5","href":"https://static.observableusercontent.com/files/8db2d5709ca5bb884fd8187f2f4238f05dfe44d8eb701301f1984407e1a548f8afc87ac112e2db4a8e14c0293b126a1dfa54f14b2f46b84c57a9574d1834f5a5","name":"play.png","type":"image/png","lastModified":1600082470960.426,"size":427},{"id":"7de38679d07cfda5948a46622ce038a18667524ea35ce5a2d06de0707519d77f42aa3efd829a7f7345eab7cb9493d27f5bffe651791766ce47c5508f42af3778","href":"https://static.observableusercontent.com/files/7de38679d07cfda5948a46622ce038a18667524ea35ce5a2d06de0707519d77f42aa3efd829a7f7345eab7cb9493d27f5bffe651791766ce47c5508f42af3778","name":"pause.png","type":"image/png","lastModified":1600082470960.426,"size":295},{"id":"2633cf4d0ce4a28d6d2e1a08c1b4654e7f3cc4be47ded63c373d4b96edec21b184b373ac1027b5f1740232088a2633f7dd4256224a4fa3372deaa531962e40ff","href":"https://static.observableusercontent.com/files/2633cf4d0ce4a28d6d2e1a08c1b4654e7f3cc4be47ded63c373d4b96edec21b184b373ac1027b5f1740232088a2633f7dd4256224a4fa3372deaa531962e40ff","name":"reverse.png","type":"image/png","lastModified":1600082470960.426,"size":461},{"id":"78edbebd37a094a4babea90547d17be3d83e26e2339713d20bc12f29d2093ea815dabd49fea44f1fca2e26ef1de35edc0e65586e0a5deb94f349c5c8ca9de3cf","href":"https://static.observableusercontent.com/files/78edbebd37a094a4babea90547d17be3d83e26e2339713d20bc12f29d2093ea815dabd49fea44f1fca2e26ef1de35edc0e65586e0a5deb94f349c5c8ca9de3cf","name":"prev.png","type":"image/png","lastModified":1600082470960.426,"size":336},{"id":"345de42860ee300814cd0a24d623a5cb99d1a47f74789ca01f243c08c9d2aebc743c7277daefaaf767d12b69181f74ebf059427a4102dae97d95c7348535f3df","href":"https://static.observableusercontent.com/files/345de42860ee300814cd0a24d623a5cb99d1a47f74789ca01f243c08c9d2aebc743c7277daefaaf767d12b69181f74ebf059427a4102dae97d95c7348535f3df","name":"first.png","type":"image/png","lastModified":1600082470960.426,"size":421},{"id":"4485c2714a68bf95349de0e9c440f80f32bbc69ee8264708f037dff038f0a6db824c3dc14633005c776cee0e39694a32dc22358e3a77c363eb50d5cf4dd4cb1a","href":"https://static.observableusercontent.com/files/4485c2714a68bf95349de0e9c440f80f32bbc69ee8264708f037dff038f0a6db824c3dc14633005c776cee0e39694a32dc22358e3a77c363eb50d5cf4dd4cb1a","name":"image_8.gif","type":"image/gif","lastModified":1600185673568.052,"size":25235},{"id":"b86072bb878dbd7dfa86a03d39dd36cddd7093a97e07d373431793a8da63dab23713c4a293590f8499688c185caefa60802f7002bd6d807b5a668f04d0fc3cb7","href":"https://static.observableusercontent.com/files/b86072bb878dbd7dfa86a03d39dd36cddd7093a97e07d373431793a8da63dab23713c4a293590f8499688c185caefa60802f7002bd6d807b5a668f04d0fc3cb7","name":"image_10.gif","type":"image/gif","lastModified":1600185673580.621,"size":24918},{"id":"4eaa04e6790ac28985386c4cf2497e42cded682a3f863d90f82a028b0c1340d1407c7b6f6eeb3b8a883520049a3c01b940b23b17e1211adfdebb1bac24774bd1","href":"https://static.observableusercontent.com/files/4eaa04e6790ac28985386c4cf2497e42cded682a3f863d90f82a028b0c1340d1407c7b6f6eeb3b8a883520049a3c01b940b23b17e1211adfdebb1bac24774bd1","name":"image_2.gif","type":"image/gif","lastModified":1600185673582.518,"size":21601},{"id":"64982654ade4bc8eaa4bee03e8494ee8b7ee4ea9c8178c89e071fb00582bd588ce9be2279eb678dc604b39175d470bb66da9ba2e07fff18782955449bbbd100f","href":"https://static.observableusercontent.com/files/64982654ade4bc8eaa4bee03e8494ee8b7ee4ea9c8178c89e071fb00582bd588ce9be2279eb678dc604b39175d470bb66da9ba2e07fff18782955449bbbd100f","name":"image_5.gif","type":"image/gif","lastModified":1600185673623.422,"size":25764},{"id":"2652f1ac8ef91a622a4efe6ae59c9ee940eb2686e09dd54ab3454f7a18f3ceaa5196eb2607097fa6165197442758ee8dbb2f66eba7ef5a1088ff06afcfdc3f05","href":"https://static.observableusercontent.com/files/2652f1ac8ef91a622a4efe6ae59c9ee940eb2686e09dd54ab3454f7a18f3ceaa5196eb2607097fa6165197442758ee8dbb2f66eba7ef5a1088ff06afcfdc3f05","name":"image_6.gif","type":"image/gif","lastModified":1600185673605.347,"size":23911},{"id":"1dc1b9535e842519ab365dd141be35755695f0809f1dba94524dc893462671bfcea74091c5cf1f7764179bde05ff4982fc93072cca2b9f9582fe8bd7af67c316","href":"https://static.observableusercontent.com/files/1dc1b9535e842519ab365dd141be35755695f0809f1dba94524dc893462671bfcea74091c5cf1f7764179bde05ff4982fc93072cca2b9f9582fe8bd7af67c316","name":"image_7.gif","type":"image/gif","lastModified":1600185673748.957,"size":24634}] 2f:{"id":"cad43255eccd25cf","slug":"animation-controls","title":"Animation controls","thumbnail":"d153952e35bbcae714abbde202580bbfd646fda7a5f0ec46ca06c7ee2f01f854","access_level":"public","create_time":"$D2020-09-14T11:21:10.960Z","update_time":"$D2020-09-16T13:33:09.448Z","view_time":null,"first_public_time":"$D2020-09-14T11:21:27.048Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"63e96f00663997c7","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":"starter_2024"},"version":650,"publish_version":650,"role":null,"authored":false,"authors":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null}],"members":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Animation controls","cells":[{"id":101,"value":"md`# Animation controls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"files = [\n FileAttachment(\"image_1.gif\"),\n FileAttachment(\"image_2.gif\"),\n FileAttachment(\"image_3.gif\"),\n FileAttachment(\"image_4.gif\"),\n FileAttachment(\"image_5.gif\"),\n FileAttachment(\"image_6.gif\"),\n FileAttachment(\"image_7.gif\"),\n FileAttachment(\"image_8.gif\"),\n FileAttachment(\"image_9.gif\"),\n FileAttachment(\"image_10.gif\"),\n FileAttachment(\"image_11.gif\"),\n FileAttachment(\"image_12.gif\")\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"html`${await files[lindex - 1].image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"mutable lindex = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"mutable animationSpeed = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"llast = files.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"mutable animationForward = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"mutable animationPlay = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"mutable animationType = \"loop\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"viewof a = animationControls()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"play()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"function* play() {\n while (animationPlay) {\n var increment = 1;\n if (lindex >= llast) {\n if (animationType == 'once') {\n mutable animationPlay = false;\n break;\n } else if (animationType == 'loop') {\n mutable lindex = 1;\n break;\n } else if (animationType == 'reflect') {\n increment = -1;\n }\n }\n yield Promises.delay(animationSpeed, (mutable lindex += increment));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"style = html`