CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Burst | mo.js</title> <meta name="generator" content="VuePress 1.9.10"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> <link rel="manifest" href="/assets/favicons/site.webmanifest"> <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#3a0839"> <link rel="shortcut icon" href="/assets/favicons/favicon.ico"> <meta name="description" content="The official website for mojs"> <meta name="msapplication-TileColor" content="#3a0839"> <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <link rel="preload" href="/assets/css/0.styles.664372c2.css" as="style"><link rel="preload" href="/assets/js/app.9511ae28.js" as="script"><link rel="preload" href="/assets/js/4.47eaa7bc.js" as="script"><link rel="preload" href="/assets/js/3.9caef996.js" as="script"><link rel="preload" href="/assets/js/67.375a5dcf.js" as="script"><link rel="preload" href="/assets/js/32.205dd310.js" as="script"><link rel="preload" href="/assets/js/31.8b64c779.js" as="script"><link rel="prefetch" href="/assets/js/1.802b0dea.js"><link rel="prefetch" href="/assets/js/12.6085c0ff.js"><link rel="prefetch" href="/assets/js/13.58d1b12e.js"><link rel="prefetch" href="/assets/js/14.011f4638.js"><link rel="prefetch" href="/assets/js/15.ff764163.js"><link rel="prefetch" href="/assets/js/16.327ae4ea.js"><link rel="prefetch" href="/assets/js/17.a1672e05.js"><link rel="prefetch" href="/assets/js/18.0efa973c.js"><link rel="prefetch" href="/assets/js/19.023238fa.js"><link rel="prefetch" href="/assets/js/2.64b8d96f.js"><link rel="prefetch" href="/assets/js/20.d29d73cc.js"><link rel="prefetch" href="/assets/js/21.07c1ea1a.js"><link rel="prefetch" href="/assets/js/22.49e6dbe1.js"><link rel="prefetch" href="/assets/js/23.df96f4a4.js"><link rel="prefetch" href="/assets/js/24.388efe1c.js"><link rel="prefetch" href="/assets/js/25.07c26136.js"><link rel="prefetch" href="/assets/js/26.42f4244d.js"><link rel="prefetch" href="/assets/js/27.85638e06.js"><link rel="prefetch" href="/assets/js/28.f8c71aa2.js"><link rel="prefetch" href="/assets/js/29.86905a8c.js"><link rel="prefetch" href="/assets/js/30.b7a4cd53.js"><link rel="prefetch" href="/assets/js/33.309ee930.js"><link rel="prefetch" href="/assets/js/34.2792bbab.js"><link rel="prefetch" href="/assets/js/35.069cfd14.js"><link rel="prefetch" href="/assets/js/36.039847a1.js"><link rel="prefetch" href="/assets/js/37.89221f5e.js"><link rel="prefetch" href="/assets/js/38.c6cb2a66.js"><link rel="prefetch" href="/assets/js/39.bdda383c.js"><link rel="prefetch" href="/assets/js/40.1000aacf.js"><link rel="prefetch" href="/assets/js/41.0ac526df.js"><link rel="prefetch" href="/assets/js/42.3e2d6a41.js"><link rel="prefetch" href="/assets/js/43.8bf09c0e.js"><link rel="prefetch" href="/assets/js/44.a5b69f5c.js"><link rel="prefetch" href="/assets/js/45.edd3a23b.js"><link rel="prefetch" href="/assets/js/46.f0a855cd.js"><link rel="prefetch" href="/assets/js/47.0908c1e3.js"><link rel="prefetch" href="/assets/js/48.db04694d.js"><link rel="prefetch" href="/assets/js/49.c121ea5b.js"><link rel="prefetch" href="/assets/js/5.50a866a7.js"><link rel="prefetch" href="/assets/js/50.b6d1a417.js"><link rel="prefetch" href="/assets/js/51.b4301778.js"><link rel="prefetch" href="/assets/js/52.f44b8a35.js"><link rel="prefetch" href="/assets/js/53.c0059383.js"><link rel="prefetch" href="/assets/js/54.bb941569.js"><link rel="prefetch" href="/assets/js/55.55364e64.js"><link rel="prefetch" href="/assets/js/56.7a94e9bd.js"><link rel="prefetch" href="/assets/js/57.a03da508.js"><link rel="prefetch" href="/assets/js/58.bb4604d0.js"><link rel="prefetch" href="/assets/js/59.b16e03e9.js"><link rel="prefetch" href="/assets/js/6.b54c7728.js"><link rel="prefetch" href="/assets/js/60.85609e7a.js"><link rel="prefetch" href="/assets/js/61.42f2e14c.js"><link rel="prefetch" href="/assets/js/62.284d3cac.js"><link rel="prefetch" href="/assets/js/63.ea03df9f.js"><link rel="prefetch" href="/assets/js/64.dc69cff4.js"><link rel="prefetch" href="/assets/js/65.b4b0c63b.js"><link rel="prefetch" href="/assets/js/66.38efd21d.js"><link rel="prefetch" href="/assets/js/68.1f312304.js"><link rel="prefetch" href="/assets/js/69.280cf201.js"><link rel="prefetch" href="/assets/js/7.f9036875.js"><link rel="prefetch" href="/assets/js/70.a67a7642.js"><link rel="prefetch" href="/assets/js/71.8bd8d003.js"><link rel="prefetch" href="/assets/js/72.784cd386.js"><link rel="prefetch" href="/assets/js/8.a1de01cd.js"><link rel="prefetch" href="/assets/js/9.5a5477bb.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.b7d5e58e.js"> <link rel="stylesheet" href="/assets/css/0.styles.664372c2.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo.svg" alt="mo.js" class="logo"> <span class="site-name can-hide">mo.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"> Home </a></div><div class="nav-item"><a href="/tutorials/" class="nav-link router-link-active"> Tutorials </a></div><div class="nav-item"><a href="/api/" class="nav-link"> Api </a></div><div class="nav-item"><a href="/tools/" class="nav-link"> Tools </a></div><div class="nav-item"><a href="https://github.com/mojs" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> </nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"> Home </a></div><div class="nav-item"><a href="/tutorials/" class="nav-link router-link-active"> Tutorials </a></div><div class="nav-item"><a href="/api/" class="nav-link"> Api </a></div><div class="nav-item"><a href="/tools/" class="nav-link"> Tools </a></div><div class="nav-item"><a href="https://github.com/mojs" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> </nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Tutorials</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/tutorials/" aria-current="page" class="sidebar-link">Tutorials overview</a></li><li><a href="/tutorials/getting-started.html" class="sidebar-link">Getting started</a></li><li><a href="/tutorials/shape-swirl/" class="sidebar-link">Shape & ShapeSwirl</a></li><li><a href="/tutorials/burst/" aria-current="page" class="active sidebar-link">Burst</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/tutorials/burst/#burst-2" class="sidebar-link">Burst</a></li><li class="sidebar-sub-header"><a href="/tutorials/burst/#children-options" class="sidebar-link">Children Options</a></li><li class="sidebar-sub-header"><a href="/tutorials/burst/#then-tune-generate-and-play" class="sidebar-link">then, tune, generate and play</a></li><li class="sidebar-sub-header"><a href="/tutorials/burst/#recap" class="sidebar-link">Recap</a></li><li class="sidebar-sub-header"><a href="/tutorials/burst/#use-cases" class="sidebar-link">Use Cases</a></li><li class="sidebar-sub-header"><a href="/tutorials/burst/#recap-2" class="sidebar-link">Recap</a></li><li class="sidebar-sub-header"><a href="/tutorials/burst/#thank-you" class="sidebar-link">Thank you!</a></li></ul></li><li><a href="/tutorials/usage-with-react.html" class="sidebar-link">Usage with React</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Tools</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API</span> <span class="arrow right"></span></p> </section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="burst"><a href="#burst" class="header-anchor">#</a> Burst</h1> <p>Burst is the module that helps you to craft numerous sophisticated motion effects.</p> <ul><li><a href="/api/burst">API reference</a></li></ul> <blockquote><p>Please make sure you are comfortable with <a href="/tutorials//shape-swirl/">Shapes & ShapeSwirl</a> before proceeding with this tutorial. Understanding those modules is crucial for understanding the <code>Burst</code>.</p></blockquote> <h2 id="burst-2"><a href="#burst-2" class="header-anchor">#</a> Burst</h2> <p><code>Burst</code> is a higher order module that creates sophisticated visual effects in any part of the screen you want. You can think of <code>Burst</code> as a particle emitter that composes a bunch of <code>ShapeSwirl</code>'s together, creating a circle of particles.</p> <p>That's how it looks like by default:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> burst<span class="token punctuation">.</span><span class="token function">replay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_19099317e0137756f414ed3a043f85ae" class="mojs-interactive__result " style="height:300px;"><div id="pen_19099317e0137756f414ed3a043f85ae_controller" class="mojs-interactive__controller"></div></div></div> <p>Just like with <code>Shape</code>, mojs takes care about all bootstrapping work, creates as narrow container for the burst as possible and positioning the effect for you.</p> <p>From the technical point of view, <code>Burst</code> is just a main <code>ShapeSwirl</code> that holds a bunch of child <code>ShapeSwirl</code>'s. Pictorially it looks like this:</p> <p><img src="/assets/burst/burst-pic.png" alt="Illustration of how the burst swirls works"></p> <p>The main swirl has no <code>shape</code> nor any presentation properties and in fact, is <code>0</code> size by default completely unreachable for user's interaction pointer.</p> <p>Another important note is that <code>radius</code> property (and <code>radiusX</code>/<code>radiusY</code> ones) has different meaning - it controls the radius of radial shape of particles:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_643c0d3499e331934e95e80ffe2e323c" class="mojs-interactive__result " style="height:300px;"><div id="pen_643c0d3499e331934e95e80ffe2e323c_controller" class="mojs-interactive__controller"></div></div></div> <p>There are few more properties that <code>Burst</code> implements over <code>ShapeSwirl</code> to control the radial shape behavior that particles compose. The first one is the <code>count</code> property that sets the amount of particles:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="fe6f9d1476aae148f1cfb36f599c92ff" class="mojs-interactive__result " style="height:300px;"><div id="fe6f9d1476aae148f1cfb36f599c92ff_controller" class="mojs-interactive__controller"></div></div></div> <p>The particles of the burst are evenly placed in a 360 degree circle, which you can narrow down with the <code>degree</code> property:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">degree</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_11fadc18861a656f0a72f5e132f48f12" class="mojs-interactive__result " style="height:300px;"><div id="pen_11fadc18861a656f0a72f5e132f48f12_controller" class="mojs-interactive__controller"></div></div></div> <p>Here above, we have a burst that has <code>30 degrees</code> of sufficient place for particles.</p> <p>It is very important to note here that since the main swirl of <code>Burst</code> module has no actual shape - it has no style attributes that define shape's presentation - all of them among which are the <code>stroke</code> or <code>strokeWidth</code> or <code>fill</code> are completely useless.</p> <p>Also, the main swirl of the burst have no <code>tween</code> related properties like <code>delay</code> or <code>duration</code>, the later one gets computed automatically regarding the <code>duration</code> of the particles.</p> <p>Nonetheless, all <strong>properties</strong> that control shape position, parent and opacity are present:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">90</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">1</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="dd9e8ce40b04df492bbf500616ddb815" class="mojs-interactive__result " style="height:300px;"><div id="dd9e8ce40b04df492bbf500616ddb815_controller" class="mojs-interactive__controller"></div></div></div> <p>To recap, the main swirl of the <code>Burst</code> has no <code>style</code> attributes because it has no shape, furthermore it has no <code>tween</code> related properties like <code>duration</code> which is computed from the particles <code>duration</code>. But <code>Burst</code> has all the other properties, most of them regarding position, opacity, parent etc. You can always use the <a href="/api/burst">Burst API</a> as the reference.</p> <p>But <code>Burst</code> won't be much interesting unless we can control child particles, right?</p> <h2 id="children-options"><a href="#children-options" class="header-anchor">#</a> Children Options</h2> <p>You can control children options with the <code>children</code> object property:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">degree</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'magenta'</span> <span class="token operator">:</span> <span class="token string">'cyan'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_4df574c7099a40929aebaaf4af386a04" class="mojs-interactive__result mojs-interactive__result--dark" style="height:300px;"><div id="pen_4df574c7099a40929aebaaf4af386a04_controller" class="mojs-interactive__controller"></div></div></div> <p>I have some good news for you - you already know <code>Burst</code>'s syntax! Confusing claim? Nah! If you are familiar with <code>Shape</code> and <code>ShapeSwirl</code> modules - you know the <code>Burst</code>. That's because the <code>Burst</code> is nothing than just a <code>ShapeSwirl</code> that holds child <code>ShapeSwirls</code>, remember? This means you can put any property of <code>ShapeSwirl</code> to the <code>children</code> object, go try:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'polygon'</span><span class="token punctuation">,</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'cyan'</span> <span class="token operator">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">360</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_64f13b396761ceabeb6e2967472acfa2" class="mojs-interactive__result mojs-interactive__result--dark" style="height:300px;"><div id="pen_64f13b396761ceabeb6e2967472acfa2_controller" class="mojs-interactive__controller"></div></div></div> <p>Actually <code>Burst</code> gives you even more control over each child, allowing you to specify property for each of them explicitly. These two techniques are called <code>Stagger Strings</code> and <code>Property Maps</code>.</p> <h3 id="stagger-strings"><a href="#stagger-strings" class="header-anchor">#</a> Stagger Strings</h3> <p><code>Stagger Strings</code> were designed to express continuous numeric values with some defined step (see delay property on children):</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'polygon'</span><span class="token punctuation">,</span> <span class="token literal-property property">points</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'cyan'</span> <span class="token operator">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">360</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token literal-property property">delay</span><span class="token operator">:</span> <span class="token string">'stagger(0, 100)'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_3610a7d0e0ab283acf8d42f3a4b6b9a9" class="mojs-interactive__result mojs-interactive__result--dark" style="height:300px;"><div id="pen_3610a7d0e0ab283acf8d42f3a4b6b9a9_controller" class="mojs-interactive__controller"></div></div></div> <p>The first parameter in <code>stagger</code> function is the <code>start</code> value, all subsequent steps will be added to that start value, that is optional; If you just write <code>stagger(25)</code>, it will mean to stagger with step of <code>25</code>, starting from <code>0</code>.</p> <p>In the demo above, that's exact the same circle as in the demo before, but we have <strong>staggered</strong> the <code>delay</code> property so it looks rather spiral now.</p> <p>Every numeric value can be expressed with stagger stings. Also, they can contain <code>rand</code>oms (see the delay property in children):</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'polygon'</span><span class="token punctuation">,</span> <span class="token literal-property property">points</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'cyan'</span> <span class="token operator">:</span> <span class="token string">'yellow'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">360</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token literal-property property">delay</span><span class="token operator">:</span> <span class="token string">'stagger( rand(0, 200) )'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click somewhere to see</p> <div id="pen_05ff77cfc49e2d5f82363d90339a24e1" class="mojs-interactive__result mojs-interactive__result--dark" style="height:300px;"><div id="pen_05ff77cfc49e2d5f82363d90339a24e1_controller" class="mojs-interactive__controller"></div></div></div> <p>We have staggered the delay with random function in interval of 0 to 200.</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>If you run the <code>.generate()</code> function before playing your burst, all random values will be recalculated for each time you play the burst. Like this:</p> <div class="language-js extra-class"><pre class="language-js"><code>burst<span class="token punctuation">.</span><span class="token function">generate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> burst<span class="token punctuation">.</span><span class="token function">replay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <h3 id="property-maps"><a href="#property-maps" class="header-anchor">#</a> Property Maps</h3> <p>Property Map was designed to express sequential values. You can use it to generate values that repeat over and over but are mapped to children length. Basically, it is just an array that maps its values to children regarding child index with <code>mod</code> function. So if you have a <code>property map</code> with <code>3 values</code> and burst has <code>5 children</code>, then the <code>4</code>th and <code>5</code>th items will receive the <code>0</code>th and <code>1</code>st values from the map respectively:</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> burst <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mojs<span class="token punctuation">.</span>Burst</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token number">0</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">shape</span><span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">fill</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'deeppink'</span><span class="token punctuation">,</span> <span class="token string">'cyan'</span><span class="token punctuation">,</span> <span class="token string">'yellow'</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">strokeWidth</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">2000</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div>  <div id="c3c518a84fea019d715cad07e87c29bf" class="mojs-interactive__result mojs-interactive__result--dark" style="height:300px;"><div id="c3c518a84fea019d715cad07e87c29bf_controller" class="mojs-interactive__controller"></div></div></div> <p>So starting from 12 o'clock clockwise, the 5 childrens <code>fill</code> properties get values of <code>deeppink</code>, <code>cyan</code>, <code>yellow</code> and then again starting from the beginning of the property map - <code>deeppink</code>, <code>cyan</code> ( <code className="code-inline">[0],[1],[2],[0],[1]</code> ).</p> <p>Property maps work with any property and property forms, in fact, that's just a prism (or multiplexer) that feeds children with properties by virtue of modulus function. Good aid if you want to set some property on child explicitly.</p> <h2 id="then-tune-generate-and-play"><a href="#then-tune-generate-and-play" class="header-anchor">#</a> then, tune, generate and play</h2> <p>You can make <code>then</code> state chains, <code>tune</code> and <code>generate</code> any <code>Burst</code> the same as you do with <code>Shape</code> or <code>ShapeSwirl</code>. Also, since the <code>Burst</code> is merely a <code>ShapeSwirl</code> under the hood, you can use any <code>tween</code> interface public method like <code>play</code>, <code>setProgress</code>, <code>replay</code> etc (click somewhere to see):</p> <div class="mojs-interactive"><div class="mojs-interactive__code"><div class="language-js extra-class"><pre class="language-js"><code>document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> burst <span class="token punctuation">.</span><span class="token function">tune</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> e<span class="token punctuation">.</span>pageX<span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> e<span class="token punctuation">.</span>pageY <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">setSpeed</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">replay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div></div> <p class="mojs-interactive__clicknotice">Click anywhere to see</p> <div id="dbf4904aa71f428a38401610e1c8f863" class="mojs-interactive__result mojs-interactive__result--dark" style="height:300px;"><div id="dbf4904aa71f428a38401610e1c8f863_controller" class="mojs-interactive__controller"></div></div></div> <h2 id="recap"><a href="#recap" class="header-anchor">#</a> Recap</h2> <p>That's basically the burst, as I said you already know it so we won't go thru the children options again, instead, let's jog thru some use cases in the next section which will help as to gain some intuition over where and how to use the bursts. As you remember, - <code>Burst</code> is just a composition of a bunch of <code>ShapeSwirls</code>. There is the main swirl in the center of the burst but it has no visual shape. Also, it has no tween properties and its durations is calculated regarding the duration of the children. All child swirls use the main one as a <code>parent</code>. You can set properties of <code>children</code> with the appropriate property. Please, use the <a href="/api/burst">Burst API</a> as the reference.</p> <h2 id="use-cases"><a href="#use-cases" class="header-anchor">#</a> Use Cases</h2> <blockquote><p>Please note that the use cases section contains a lot of live code examples but the actual code samples are omitted for time savings and simplicity sake. The actual code is still available on the <code>Babel</code> tab of the pens and I highly encourage you to read through and play with them while we will walk through this section. You can omit reading large demos code since it is probably unreadable (some Codepens can contain bundled code) or it could be too large to understand sparingly, but you can return to them later. I will leave a little <strong>(×)</strong> mark for you to indicate that you can skip reading the source code of the Codepen for now.</p></blockquote> <p><code>Burst</code>, in similarity with <code>Shape</code> or <code>ShapeSwirl</code>, has numerous application fields, among which are motion graphics and UI-animations. In contrary to the <a href="/tutorials/shape-swirl/"> Shape & ShapeSwirl </a> tutorial, I won't split use cases to different entities but rather will try to do lot's of small demos, each with explanation comments. Hang tight!</p> <h3>Micro Animations</h3> <p>The first thing that comes to mind when I see the default burst - is the famous <a href="https://codepen.io/donovanh/pen/dYqxNb" target="_blank" rel="noopener noreferrer">Twitter's fav animation<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. Animations like that are usually called <strong>micro animations</strong> but I've used to call them <strong>micro celebrations</strong> because of their festivity.</p> <p>Anyways, sequences like that are a cinch when you have the burst module in your hands. Here's how to do the main part of the sequence (click anywhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="cb910fce2e9ed27f902ae7f895bbb9ac" data-preview="true" data-pen-title="cb910fce2e9ed27f902ae7f895bbb9ac" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/cb910fce2e9ed27f902ae7f895bbb9ac/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/cb910fce2e9ed27f902ae7f895bbb9ac" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Here above, we have declared a burst with 5 particles (which is by default) with a burst's radius transition from 4 to 19. There are 2 strategies for bursts like that - one is to scale children down (by default), the second one is to animate <code>strokeDashoffset</code> on children which we have used here.</p> <p>The next step is to add two more shapes to the scene - one circle with <code>strokeWidth</code> animation and a custom one - the star with <code>elastic.out</code> transition for the <code>scale</code>(click anywhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="080045a3420abd5344443aff91c85fa2" data-preview="true" data-pen-title="080045a3420abd5344443aff91c85fa2" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/080045a3420abd5344443aff91c85fa2/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/080045a3420abd5344443aff91c85fa2" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>I love using the burst module over sprites because it turns out to be a way flexible over pre-rendered sequence of images, - you can play with easings, time, delay, colors etc. Also, you can even change shapes with no effort at all - for instance, if you want to add stars instead of lines (click anywhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="0fd14523d76f93865539f1f011682da9" data-preview="true" data-pen-title="0fd14523d76f93865539f1f011682da9" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/0fd14523d76f93865539f1f011682da9/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/0fd14523d76f93865539f1f011682da9" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Ok, let's redo the later Twitter love animation too. There is the burst part of the sequence(click anywhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="28b429cd2d5ae8c0dd0f10cecd6d0bd0" data-preview="true" data-pen-title="28b429cd2d5ae8c0dd0f10cecd6d0bd0" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/28b429cd2d5ae8c0dd0f10cecd6d0bd0/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/28b429cd2d5ae8c0dd0f10cecd6d0bd0" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>The catch here is to use the <code>in</code> easing for <code>scale</code> property and the opposite <code>out</code> easing for particles position. Also, we have set the <code>pathScale</code> slightly smaller for "inner" particles. After that, we have defined a small <code>degreeShift</code> for each odd / inner particle. Then <code>null</code> value in the <a href="/api/syntax/property-maps">properyMaps</a> mean that it takes the default value. For scale it's <code>1</code> and in <code>degreeShift</code> it's <code>0</code>.</p> <p>The next step is to add the circle shape and heart animations, almost identical to ones we have used in the Twitter fav scene (click anywhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="e3751855536c67dc6f57f9e74e5e347d" data-preview="true" data-pen-title="e3751855536c67dc6f57f9e74e5e347d" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/e3751855536c67dc6f57f9e74e5e347d/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/e3751855536c67dc6f57f9e74e5e347d" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>And the last touch is to add all the color deltas, there are quite some of them (click anywhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="f25a2fbaf15c43c0923f507d54951cdb" data-preview="true" data-pen-title="f25a2fbaf15c43c0923f507d54951cdb" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/f25a2fbaf15c43c0923f507d54951cdb/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/f25a2fbaf15c43c0923f507d54951cdb" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>That's basically the same micro confirmations that I've given you in the <a href="/tutorials/shape/">Shape & ShapeSwirl</a> tutorial <strong>(×)</strong>:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="3c49de2d7d0ca3e92bf5db5bf7a2687d" data-preview="true" data-pen-title="3c49de2d7d0ca3e92bf5db5bf7a2687d" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/3c49de2d7d0ca3e92bf5db5bf7a2687d/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/3c49de2d7d0ca3e92bf5db5bf7a2687d" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>In the example above we didn't use the <code>Burst</code> module that much. But you can imagine that those effects are much easier with the <code>Burst</code> module. For instance the bubbles in the first part could be made like this:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="a336008aff2d73121763887097a99001" data-preview="true" data-pen-title="a336008aff2d73121763887097a99001" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/a336008aff2d73121763887097a99001/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/a336008aff2d73121763887097a99001" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Here we have the static <code>radius</code> of <code>25</code> on burst and <code>3</code> <code>white</code> particles. We've set a slightly <code>rand</code>om <code>degreeShift</code> and a <code>delay</code> on the <code>children</code> that eventually gives us the bubble like motion.</p> <p>The second burst is super simple too:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="afbfb59f00d5dfb8b28fc97510fcc167" data-preview="true" data-pen-title="afbfb59f00d5dfb8b28fc97510fcc167" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/afbfb59f00d5dfb8b28fc97510fcc167/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/afbfb59f00d5dfb8b28fc97510fcc167" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>As you can see, the second burst is almost the default one, we have only changed the main <code>radius</code> to <code>0 : 30</code>. As for children, we tweaked the <code>shape</code> to a <code>line</code> value, and made the <code>scaleX</code> to fade out from <code>1</code> to <code>0</code>.</p> <p>The final touch is to add center <code>circle</code> and <code>cross</code> shapes:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="d260dc9246f2100b9f2dbe79a01d01f6" data-preview="true" data-pen-title="d260dc9246f2100b9f2dbe79a01d01f6" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/d260dc9246f2100b9f2dbe79a01d01f6/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/d260dc9246f2100b9f2dbe79a01d01f6" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>The second part - the bubble fadeout effect is even simpler. For the <code>Burst</code> module, we just need to set <code>degree</code> to <code>0</code> so the particles will flow in one direction, then set <code>isSwirl</code> to <code>true</code> (Burst composes ShapeSwirls, remember?) on <code>children</code> thus particles will follow sine path. After that we need to slightly randomize <code>swirlSize</code>, <code>swirlFrequency</code> and <code>pathScale</code> parameters (click somewhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="60d5d3c97981022f20f86c37580bceb1" data-preview="true" data-pen-title="60d5d3c97981022f20f86c37580bceb1" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/60d5d3c97981022f20f86c37580bceb1/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/60d5d3c97981022f20f86c37580bceb1" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Just like with the previous example, the last touch is to add <code>circle</code> and <code>cross</code> transitions (click somewhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="f307bc95b1ac02c09042c89ea7afe945" data-preview="true" data-pen-title="f307bc95b1ac02c09042c89ea7afe945" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/f307bc95b1ac02c09042c89ea7afe945/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/f307bc95b1ac02c09042c89ea7afe945" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="motion-for-the-web"><a href="#motion-for-the-web" class="header-anchor">#</a> Motion for the web</h3> <p>Let's recall the old "motion for the web" demo <strong>(×)</strong>:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="ogOYJj" data-preview="true" data-pen-title="ogOYJj" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/ogOYJj/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/ogOYJj" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <em> Note that the demo was made a while ago so it contains deprecated syntax. </em> <p>How many burst modules have you noticed in this demo? There are quite some actually. I think the most noticeable are collisions with the ground (click to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="4fe37a79f6d665d749ebcb4f22c2ee4e" data-preview="true" data-pen-title="4fe37a79f6d665d749ebcb4f22c2ee4e" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/4fe37a79f6d665d749ebcb4f22c2ee4e/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/4fe37a79f6d665d749ebcb4f22c2ee4e" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>This one was made by virtue of <code>degree: 180</code>, childrens' <code>radius</code> of <code>7</code> and <code>strokeDashoffset</code> animation on particles.</p> <p>There is another burst in that demo:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="953926af8c30d3dd297070b1a079e059" data-preview="true" data-pen-title="953926af8c30d3dd297070b1a079e059" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/953926af8c30d3dd297070b1a079e059/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/953926af8c30d3dd297070b1a079e059" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>This one is simple too, the good one to practice basics.</p> <p>Did you notice those meteors on the left of the letters? Those are <code>Burst</code> too. How? Well first you have a burst with 3 children:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="1018219ace50f564f7bb8b77b53efeb8" data-preview="true" data-pen-title="1018219ace50f564f7bb8b77b53efeb8" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/1018219ace50f564f7bb8b77b53efeb8/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/1018219ace50f564f7bb8b77b53efeb8" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Then you set <code>degree</code> of <code>0</code> so they all will fly to the same direction:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="d84370a3c19fdcea8c714e7049c9ab5d" data-preview="true" data-pen-title="d84370a3c19fdcea8c714e7049c9ab5d" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/d84370a3c19fdcea8c714e7049c9ab5d/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/d84370a3c19fdcea8c714e7049c9ab5d" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Hm, they kind of overlap, so let's shift them by staggering <code>left</code> and <code>top</code> properties on children, after that let's add some <code>delay</code> with help of property map:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="2be25259bdd8e01f9ac3770f6f2bd36a" data-preview="true" data-pen-title="2be25259bdd8e01f9ac3770f6f2bd36a" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/2be25259bdd8e01f9ac3770f6f2bd36a/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/2be25259bdd8e01f9ac3770f6f2bd36a" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Do you see that? Almost there. The last touch is to rotate the main swirl:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="bf8377efd5b0dada9537481e29ecd6af" data-preview="true" data-pen-title="bf8377efd5b0dada9537481e29ecd6af" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/bf8377efd5b0dada9537481e29ecd6af/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/bf8377efd5b0dada9537481e29ecd6af" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Pretty yummy detail.</p> <p>What else have we got in the demo? Letters! That's how O letter was made:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="432464f276fe6f06b457915ca6062723" data-preview="true" data-pen-title="432464f276fe6f06b457915ca6062723" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/432464f276fe6f06b457915ca6062723/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/432464f276fe6f06b457915ca6062723" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>As you can see, we've set the main swirl's <code>radius</code> and <code>degree</code> to <code>0</code> to put the child shapes in the one spot. Then we just have to slightly stagger <code>delay</code> on children.</p> <p>The same technique for the other parts - vertical and horizontal lines:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="33f7924ecd146d951698bf190ac7838e" data-preview="true" data-pen-title="33f7924ecd146d951698bf190ac7838e" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/33f7924ecd146d951698bf190ac7838e/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/33f7924ecd146d951698bf190ac7838e" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Good. Let's refactor it a bit and make the vertical line start from the bottom, like firework launch:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="a3c64825683dddd18316f8f288475131" data-preview="true" data-pen-title="a3c64825683dddd18316f8f288475131" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/a3c64825683dddd18316f8f288475131/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/a3c64825683dddd18316f8f288475131" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>That's better.</p> <h3>Blast all the things up</h3> <p>Let's move on. What else we can do with <code>Burst</code>? We can blast things up. I love blasting things up, do you? Recall this demo from the <a href="/tutorials/shape/">Shape & ShapeSwirl</a> tutorial(×):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sandstedt" data-slug-hash="RzqpRz" data-preview="true" data-pen-title="c94452fb65dbf676b0ae8a12d4267473" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/RzqpRz/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sandstedt">@sandstedt</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sandstedt/pen/RzqpRz" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Do you see that blast at the start? Let's make it together. First, you can notice these small particles (click somewhere to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="79db23782ec1eb9d16246b136ec82b9c" data-preview="true" data-pen-title="79db23782ec1eb9d16246b136ec82b9c" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/79db23782ec1eb9d16246b136ec82b9c/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/79db23782ec1eb9d16246b136ec82b9c" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Notice how we use <code>pathScale</code> and <code>degreeShift</code> properties to add randomness to the blast. The <code>pathScale</code> property defines how the length of the particle's path scales. The <code>degreeShift</code> property defines how much the particle will shift in its radial position in burst circle shape. So if a particle has <code>degreeShift</code> of <code>90</code>, it will be shifted in radial shape by 90 degrees. Since <code>pathScale</code> and <code>degreeShift</code> both have random values and we <code>generate</code> the module on each user click - we always have the random blast pattern.</p> <p>Let's add more details to the blast, for instance, another burst with large geometric shapes:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="3b9c757a7625dc015753740bcad8fb66" data-preview="true" data-pen-title="3b9c757a7625dc015753740bcad8fb66" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/3b9c757a7625dc015753740bcad8fb66/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/3b9c757a7625dc015753740bcad8fb66" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Feels rather messy. But it's fine for now, it should get straight when we will add more shapes:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="4c8366d3a7eea2a5f83a3d457f8e9cd9" data-preview="true" data-pen-title="4c8366d3a7eea2a5f83a3d457f8e9cd9" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/4c8366d3a7eea2a5f83a3d457f8e9cd9/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/4c8366d3a7eea2a5f83a3d457f8e9cd9" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>And the last touch is to add "one spot" large burst of 3 items - one red, one white and one black:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="699cfc8716a13e0e1c15105af2b6fb95" data-preview="true" data-pen-title="699cfc8716a13e0e1c15105af2b6fb95" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/699cfc8716a13e0e1c15105af2b6fb95/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/699cfc8716a13e0e1c15105af2b6fb95" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Yum. I hope you love to blast things up too now. Notice we did it without a single repaint!</p> <h3>Modal blast</h3> <p>If you recall the next old demo, you probably can say now how it was made. How many modules does this blast compose (click close to see the effect) <strong>(×)</strong>?</p> <div height="700"><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="XJjLxe" data-preview="true" data-pen-title="XJjLxe" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/XJjLxe/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/XJjLxe" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>The answer is 3 - <code>2 Bursts</code> and <code>1 subtle circle</code> in the middle.</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="6caf96461207a5caa9226fbd2631569d" data-preview="true" data-pen-title="6caf96461207a5caa9226fbd2631569d" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/6caf96461207a5caa9226fbd2631569d/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/6caf96461207a5caa9226fbd2631569d" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>The effect is a bit more modest than the previous one. As you can see, I haven't recreated exactly the same sequence here, but rather made a slightly different one.</p> <h3>The sleepy mole</h3> <p>OK. Enough distraction. Let's create something less straightforward. Recall this demo with the mole <strong>(×)</strong>:</p> <div height="600"><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="477056cb1ffe88c4bfbf8a3005d99496" data-preview="true" data-pen-title="477056cb1ffe88c4bfbf8a3005d99496" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/477056cb1ffe88c4bfbf8a3005d99496/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/477056cb1ffe88c4bfbf8a3005d99496" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Can you count how much effects are bursts here? There are quite a few. The most noticeable is the effect that appears after the door shuts down - the 4 spots of dust. This one was composed with 4 bursts (one for each corner), let's start with just one for now:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="97a95a5cb7663cf336e8d80f9f511553" data-preview="true" data-pen-title="97a95a5cb7663cf336e8d80f9f511553" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/97a95a5cb7663cf336e8d80f9f511553/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/97a95a5cb7663cf336e8d80f9f511553" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>How is it possible? Remember that the <code>Burst</code> composes <code>ShapeSwirls</code>, not simple <code>Shape</code>s so, if we set <code>isSwirl</code> to <code>true</code>, we will have sine paths. This is how you do 4 at once (click to see):</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="bbc4c52b7145d9d872ac437f21afd75f" data-preview="true" data-pen-title="bbc4c52b7145d9d872ac437f21afd75f" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/bbc4c52b7145d9d872ac437f21afd75f/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/bbc4c52b7145d9d872ac437f21afd75f" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <em> You can do the same `4 dust points effect` with just one declarative call if will use `Stagger` module, but that's a topic for the next tutorial. </em> <p>OK. Recalling the mole demo, what else did you notice? Probably confetti that appears when cube hits the floor. Right!</p> <p>That's how you do the first large one:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="421a16733643447bb4770424cf72563d" data-preview="true" data-pen-title="421a16733643447bb4770424cf72563d" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/421a16733643447bb4770424cf72563d/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/421a16733643447bb4770424cf72563d" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>The main catch here is to mimic the air flow by rotating the main swirl backward slightly. Then you have to create more bursts, each one is smaller than previous one and each of them should have a smaller delay.</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="d0d0c2b1e98f1a0f8d6ea250c31ed081" data-preview="true" data-pen-title="d0d0c2b1e98f1a0f8d6ea250c31ed081" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/d0d0c2b1e98f1a0f8d6ea250c31ed081/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/d0d0c2b1e98f1a0f8d6ea250c31ed081" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>What else have you noticed in the mole demo? Yep saliva that comes from the mole mouth when it teases. First, you want to make <code>0-degree</code> burst, and rotate the main swirl downward, imitating that the air current which comes out of his mouth gets weaker:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="828d4f1e1f6fdfd608b588af0b9bdd45" data-preview="true" data-pen-title="828d4f1e1f6fdfd608b588af0b9bdd45" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/828d4f1e1f6fdfd608b588af0b9bdd45/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/828d4f1e1f6fdfd608b588af0b9bdd45" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Then add larger burst's <code>radius</code>, turn on swirl sine paths and randomize them with <code>pathScale</code> property:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="8b3f0eb920226a7c2d703e601af38fcf" data-preview="true" data-pen-title="8b3f0eb920226a7c2d703e601af38fcf" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/8b3f0eb920226a7c2d703e601af38fcf/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/8b3f0eb920226a7c2d703e601af38fcf" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>At last, add random <code>radius</code> to children and mix <code>direction</code> of the swirls:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="b1e36259bfa2d6023402eef7de77cc8d" data-preview="true" data-pen-title="b1e36259bfa2d6023402eef7de77cc8d" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/b1e36259bfa2d6023402eef7de77cc8d/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/b1e36259bfa2d6023402eef7de77cc8d" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>You can see that the <code>Burst</code> module is pretty flexible thus helps you to craft numerous sophisticated effects.</p> <h3>The dust trail</h3> <p>OK, let's recall another demo, remember this one from previous the tutorial? Did I notice that the dust trail effect is much easier with burst <strong>(×)</strong>?</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="633e6aa52d40691cca2f2cda91650bae" data-preview="true" data-pen-title="633e6aa52d40691cca2f2cda91650bae" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/633e6aa52d40691cca2f2cda91650bae/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/633e6aa52d40691cca2f2cda91650bae" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>As you remember, to create the dust trail effect, we first need to shoot the child swirls downwards to the ground with random children radiuses:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="c59d4e046a6c78f3ac9d3a5699018fa8" data-preview="true" data-pen-title="c59d4e046a6c78f3ac9d3a5699018fa8" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/c59d4e046a6c78f3ac9d3a5699018fa8/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/c59d4e046a6c78f3ac9d3a5699018fa8" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Now instead of multiple swirl modules which we have been using in the previous tutorial, we use just one burst - <code>stagger</code> expressions turn out to be useful! After that you want to create an <code>overflow: hidden</code> container and assign it as <code>parent</code> to the burst:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="e48eb4e56ce1fa94c515b4fda6513d24" data-preview="true" data-pen-title="e48eb4e56ce1fa94c515b4fda6513d24" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/e48eb4e56ce1fa94c515b4fda6513d24/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/e48eb4e56ce1fa94c515b4fda6513d24" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>This time, we have used the <code>Shape</code> module as <code>parent</code> overflow constrain.</p> <p>The last touch is to add the fading burst at the end and make the <code>parent</code> move to the left:</p> <div><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="10cc620075141688d0cf8eca7a561062" data-preview="true" data-pen-title="10cc620075141688d0cf8eca7a561062" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/10cc620075141688d0cf8eca7a561062/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/10cc620075141688d0cf8eca7a561062" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>That's exact the same effect as we have made in the <a href="/tutorials/shape/">Shape & ShapeSwirl</a> tutorial, but this time with just 2 <code>Bursts</code>! <code>Bursts</code> are fun, there is a little demo I've made with this dust trail effect (click to see):</p> <div height="700"><p data-height="600" data-theme-id="dark" data-default-tab="result" data-user="sol0mka" data-slug-hash="03e9d8f2fbf886aa1505c61c81d782a0" data-preview="true" data-pen-title="03e9d8f2fbf886aa1505c61c81d782a0" class="codepen" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"><span>See the Pen <a href="https://codepen.io/{{user}}/full/03e9d8f2fbf886aa1505c61c81d782a0/"> mograph</a> by LegoMushroom (<a href="https://codepen.io/sol0mka">@sol0mka</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script></div> <p><a href="https://codepen.io/sol0mka/pen/03e9d8f2fbf886aa1505c61c81d782a0" target="_blank" rel="noopener noreferrer">Link to pen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>That's it for <code>Burst</code>. We've touched only the surface of the possible effects that you can compose with this module, but that's a good start to convey the idea and APIs. Also, my friends from <a href="http://tympanus.net/codrops/" target="_blank" rel="noopener noreferrer">Codrops<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> wrote an awesome <a href="http://tympanus.net/Development/Animocons/" target="_blank" rel="noopener noreferrer">post<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> a while ago on the <code>Burst</code> matter, definitely check it out.</p> <h2 id="recap-2"><a href="#recap-2" class="header-anchor">#</a> Recap</h2> <p>Burst is the module that helps you to craft sophisticated motion effects with simple declarative calls. Technically, it is the main <code>ShapeSwirl</code> that composes a bunch of child <code>ShapeSwirls</code> forming the radial shape by default. <code>mojs</code> takes care about all markup bootstrapping and positioning of the module for you. The main swirl has no shape thus no presentation properties. The duration of the main swirl is calculated regarding duration of the child swirls. To control child swirls, pass the <code>ShapeSwirl</code> properties to the <code>children</code> property of the main swirl. You can find exhaustive API reference at <a href="/api/burst">Burst API</a> section.</p> <p>Burst is indeed an interesting module but, please don't overuse it. Your intention should be to guide and cheer users but not overwhelm them. Be cautious and think twice, if you feel that anyhow the effect you've done makes a visual noize rather than helps to solve a real problem, skip it entirely.</p> <hr> <h2 id="thank-you"><a href="#thank-you" class="header-anchor">#</a> Thank you!</h2> <p>I'm happy you've made it here! It was a long and intense journey, I hope you don't feel overwhelmed. I also humbly hope that these effect modules will come handy to you on your web development route. There are some more "effects" modules that will land to the mojs shortly so stay tuned. For any questions, catch me on Twitter <a href="https://twitter.com/legomushroom" target="_blank" rel="noopener noreferrer">@legomushroom<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, ask a question on StackOverflow with <code>#mojs</code> tag, rise an issue on the <a href="https://github.com/mojs/" target="_blank" rel="noopener noreferrer">GitHub repo<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. You can help the project on <a href="https://github.com/mojs/" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>. {'Love ❤️.'}</p> <p>Kudos to <a href="https://twitter.com/jonassandstedt" target="_blank" rel="noopener noreferrer">Jonas Sandstedt<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> for his help in read proofing this tutorial!</p></div> <footer class="page-edit"> </footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/tutorials/shape-swirl/" class="prev"> Shape & ShapeSwirl </a></span> <span class="next"><a href="/tutorials/usage-with-react.html"> Usage with React </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/assets/js/app.9511ae28.js" defer></script><script src="/assets/js/4.47eaa7bc.js" defer></script><script src="/assets/js/3.9caef996.js" defer></script><script src="/assets/js/67.375a5dcf.js" defer></script><script src="/assets/js/32.205dd310.js" defer></script><script src="/assets/js/31.8b64c779.js" defer></script> </body> </html>