2e:null 2f:["$","title",null,{"children":"A Reusable Way To Present Fresh DOM | Adam Argyle | Observable"}] 34:T448,md` # A Reusable Way To Present Fresh DOM Ever use appendChild(), innerHTML, or render()? Chances are you've got fresh DOM on your hands. A fun layer of polish in your UI is animation, and in some scenarios/frameworks, determining the best way to do that can be daunting. **I have a cure**, the following technique I've been using for a while and **just works** across vanilla and framework based projects. I hope you find it as useful as I do. **It makes animating in new elements a breeze.** ## Goal Define a **reusable keyframe animation** in CSS that transitions your node **from whatever**, to **in**. It's essentially dynamic, or agnostic, whichever helps your mental model, in that it's unassuming and flexible. #### NOTE: The following animations in this awesome notebook authoring tool, are triggering off the same notebook tick. For each tick, a new .box div is added to the observableHQ render zone, allowing the animation to demonstrate. This essentially mimmicks using appendChild() or render(), and getting freshly created nodes added to the tree, every few seconds. Pretty coo. `35:[] 32:{"id":"19c63f5ca3b35797","slug":"a-reusable-way-to-present-fresh-dom","title":"A Reusable Way To Present Fresh DOM","thumbnail":"2329a3e4aaa308f224b785fa34301d17ed41080878ec18f4491b1cad3ccbf294","access_level":"public","create_time":"$D2018-03-24T20:04:30.176Z","update_time":"$D2018-04-30T18:57:06.516Z","view_time":null,"first_public_time":"$D2018-03-25T04:39:49.182Z","has_unpublished_edits":null,"fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"61ed3fa9c07b290c","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":"starter_2024"},"version":466,"publish_version":466,"role":null,"authored":false,"authors":[{"type":"individual","id":"dca3ae47a0bd0fdd","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":null}],"members":[{"type":"individual","id":"dca3ae47a0bd0fdd","login":"argyleink","name":"Adam Argyle","avatar_url":"https://avatars-next.observableusercontent.com/5f41c95dcd9431fe448403e1e4dbc4fe505f0758744a9b5d6ede986df27dee55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"A Reusable Way To Present Fresh DOM","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"tick = {\n for (let i = 1; i <= 1000; ++i) {\n yield Promises.delay(3000, i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"md`## Here's the keyframe animation CSS to steal:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"reusable_box_styles = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`\n### Using This Animation\nBelow is demo usage for your element's styles. What I think is especially cool about animating this way, is that the **in and out state are in the same place** in your CSS, next to the other styles. \n\n###### REMINDER: The animation is happening because a .box element is replacing the existing one on every tick (4s).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"tick, html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\nThat's it. In your component or class (the selector doesn't matter), **specify where the component position starts and ends, right there in the typical place you're already writing CSS**. That one keyframe animation seems to cover most of my out states because they're just transform or opacity. No javascript. You really can go nuts with this one basic idea.\n\n## How's It Work?\nSo when its added to the DOM, or the page loads, it's opacity is at 0 and it's slidden down a bit. The animation is part of the default state of the element too, and it says play these keyframes, and **let the playhead rest at the end (forwards)**. \n\nThe forwards specification in shorthand above is for the **animation-fill-mode** CSS property. It's the magic here. Without it, the element would present itself, then go back to opacity 0, etc, with no easing/interpolation. Forwards lets it animate and rest at its landing point. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`\n## Browser Support\nNo library required, no ES6 import statement to write, no NPM install command. Browsers are ready to support this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"html`\n\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`\n## Gotchas\n**All of the issues with the trick can be avoided by removing the animation from the node.** I've used an .animation class before that just had the animation CSS statement in it, was easy to tag elements to present themselves. But there were times I needed that class off the element so I could do a new animation. In which case I removed the .animation class. \n\nThe keyframe animation is for scale, rotate, and transparency animations. You could certainly make one for colors or other properties. \n\nIn short, it makes it really easy to animate things in if you've scaled, rotated or faded an element.. which is great, but when animating them out or from user interactions, the animation on the element may get in your way. **Override or remove it if you need to.** 👍\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`\n
\n# Sandbox\nBelow is another example of using the animation, but this node has a much more complex start state. I think it needs some tuning, don't you think? 😉 Go ahead and mess with the numbers in the transform. Make the animation your own. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"tick, html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"md`\n

\n## Next let's add 3 boxes to the DOM, and stagger their presentation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"tick, html`\n\t

\n\t

\n\t`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"md`\n### Animation that's not boxes..\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"tick, html`\n\t

\n\t

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

\n\t

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

\n\t

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

\n\t

\n\t`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`\nSeem interesting for your project? I hope so.\n\n## Summary (rapid fire style)\n#### Setup\n- Add the @keyframes animation code to your CSS\n- In you elements/classes\n\t- Specify the **start/out styles** (use opacity and/or transforms)\n\t- Use the **present-yourself** animation\n\t- Ensure the animation fill-mode is set to **forwards**\n\n#### Triggers\n- Page load\n- Node added\n- First render/paint\n- Class added that includes the animation\n- (Probably plenty more)\n\n#### Features\n- Framework agnostic\n- No dependencies\n- Easily resolved edge cases\n- Lots of potential\n\nLet me know if you liked this article on Twitter [@argyleink](https://twitter.com/argyleink)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"