Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix animations in the component preview (#33673)

Browse source 
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
This commit is contained in:
Daniel Sauble 2025-07-29 14:22:53 -07:00 • committed by GitHub
parent 1501ae0013
commit 5fa212183a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

18
crates/ui/src/styles/animation.rs
View file

@ -109,7 +109,7 @@ impl Component for Animation {
fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
let container_size = 128.0;
let element_size = 32.0;
let left_offset = element_size - container_size / 2.0;
let offset = container_size / 2.0 - element_size / 2.0;
Some(
v_flex()
.gap_6()
@ -129,7 +129,7 @@ impl Component for Animation {
.id("animate-in-from-bottom")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.left(px(offset))
.rounded_md()
.bg(gpui::red())
.animate_in(AnimationDirection::FromBottom, false),
@ -148,7 +148,7 @@ impl Component for Animation {
.id("animate-in-from-top")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.left(px(offset))
.rounded_md()
.bg(gpui::blue())
.animate_in(AnimationDirection::FromTop, false),
@ -167,7 +167,7 @@ impl Component for Animation {
.id("animate-in-from-left")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.top(px(offset))
.rounded_md()
.bg(gpui::green())
.animate_in(AnimationDirection::FromLeft, false),
@ -186,7 +186,7 @@ impl Component for Animation {
.id("animate-in-from-right")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.top(px(offset))
.rounded_md()
.bg(gpui::yellow())
.animate_in(AnimationDirection::FromRight, false),
@ -211,7 +211,7 @@ impl Component for Animation {
.id("fade-animate-in-from-bottom")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.left(px(offset))
.rounded_md()
.bg(gpui::red())
.animate_in(AnimationDirection::FromBottom, true),
@ -230,7 +230,7 @@ impl Component for Animation {
.id("fade-animate-in-from-top")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.left(px(offset))
.rounded_md()
.bg(gpui::blue())
.animate_in(AnimationDirection::FromTop, true),
@ -249,7 +249,7 @@ impl Component for Animation {
.id("fade-animate-in-from-left")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.top(px(offset))
.rounded_md()
.bg(gpui::green())
.animate_in(AnimationDirection::FromLeft, true),
@ -268,7 +268,7 @@ impl Component for Animation {
.id("fade-animate-in-from-right")
.absolute()
.size(px(element_size))
.left(px(left_offset))
.top(px(offset))
.rounded_md()
.bg(gpui::yellow())
.animate_in(AnimationDirection::FromRight, true),