https://terminal.space/tag/webdev/ Recent content in Webdev on sugar, spice, &terminal? nice Hugo en Sun, 05 May 2024 05:44:38 +0000 https://terminal.space/tech/adding-a-sliding-animation-in-2024-why-is-this-so-hard/ Sun, 05 May 2024 05:44:38 +0000 https://terminal.space/tech/adding-a-sliding-animation-in-2024-why-is-this-so-hard/ <figure><img src="https://terminal.space/tech/adding-a-sliding-animation-in-2024-why-is-this-so-hard/images/karl-abuid-7ezVb0oTQ6M-unsplash.jpg" alt="A tower of blocks"><figcaption> <p>A tower of blocks</p> </figcaption> </figure> <p>I had a scenario for a <a href="https://github.com/intentionally-left-nil/wall_of_thanks/">personal project</a> where I had e.g. a (+) button, and clicking that button should insert a new thingy into the DOM. No problem-o. <code>button.addAdjacentHTML(element, &lt;div&gt;thingy&lt;/div&gt;)</code> to the rescue.</p> <p>Okay, now do it, but with animations. Sure easy, peasy. Let me just animate opacity 0 -&gt; 1 and&hellip; oh, that works for the new element, but the rest of the page just snaps to the new layout. That&rsquo;s pretty jarring.</p>