# Fix animations in the component preview \(\#33673\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/5fa212183ace0388735c7aa05e9bc3955a7970a5)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 5fa212183ace0388735c7aa05e9bc3955a7970a5

Requested commit: 5fa212183ace0388735c7aa05e9bc3955a7970a5

Commit: 5fa212183ace0388735c7aa05e9bc3955a7970a5

Tree: 77910f215ec01471c90695bde122d72563257799

Author: Daniel Sauble

Committer: GitHub

## Message

```
Fix animations in the component preview (#33673)

Fixes #33869

The Animation page in the Component Preview had a few issues.

* The animations only ran once, so you couldn't watch animations below
the fold.
* The offset math was wrong, so some animated elements were rendered
outside of their parent container.
* The "animate in from right" elements were defined with an initial
`.left()` offset, which overrode the animation behavior.

I made fixes to address these issues. In particular, every time you
click the active list item, it renders the preview again (which causes
the animations to run again).

Before:


https://github.com/user-attachments/assets/a1fa2e3f-653c-4b83-a6ed-c55ca9c78ad4

After:


https://github.com/user-attachments/assets/3623bbbc-9047-4443-b7f3-96bd92f582bf

Release Notes:

- N/A
```

## Parents

- [1501ae001356fbf16490083f9f1bd3ad93d022b5](https://git.cafe/gitcafe/zed/commit/1501ae001356fbf16490083f9f1bd3ad93d022b5?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/5fa212183ace0388735c7aa05e9bc3955a7970a5?format=markdown)