# Effects An effect plays when an icon appears or disappears. Set the `name` of a `` to an empty string to hide it. Set a name to show it. The `effect` attribute picks the effect. ```html ``` ```html

``` There are seven names: `implode`, `explode`, `assemble`, `draw`, `erase`, `scale`, and `expand`. Each name works in both directions. The direction picks the variant. The default is `implode` to hide and `expand` to show. The names come in pairs that play the same effect: `implode` and `expand`, `explode` and `assemble`, `draw` and `erase`. `scale` stands alone. So the seven names make four looks. In code, call `hide()` and `show(name)`. Both take an `effect` option. See [Element](https://shapcn.com/docs/element.md). Each demo below hides and shows the icon again every two seconds. ## implode The parts go into the body. The body becomes a simple shape. The shape shrinks to the center. This is the default for hiding. ```html ``` ## expand The reverse of `implode`, with an ease-out. This is the default for showing. The parts grow out of a point at the center. ```html ``` ## explode Every stroke flies away from the center, turns, and shrinks. ```html ``` ## assemble The reverse of `explode`, with an ease-out. The strokes fly in and settle into the icon. ```html ``` ## draw The strokes draw on along their own path, in source order. ```html ``` ## erase The strokes erase along their own path. ```html ``` ## scale The whole icon scales to or from zero about the center. Showing uses the `gentle` easing. ```html ```