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),

16
crates/zed/src/zed/component_preview.rs
View file

@ -105,6 +105,7 @@ enum PreviewPage {
struct ComponentPreview {
active_page: PreviewPage,
active_thread: Option<Entity<ActiveThread>>,
reset_key: usize,
component_list: ListState,
component_map: HashMap<ComponentId, ComponentMetadata>,
components: Vec<ComponentMetadata>,
@ -188,6 +189,7 @@ impl ComponentPreview {
let mut component_preview = Self {
active_page,
active_thread: None,
reset_key: 0,
component_list,
component_map: component_registry.component_map(),
components: sorted_components,
@ -265,8 +267,13 @@ impl ComponentPreview {
}
fn set_active_page(&mut self, page: PreviewPage, cx: &mut Context<Self>) {
self.active_page = page;
cx.emit(ItemEvent::UpdateTab);
if self.active_page == page {
// Force the current preview page to render again
self.reset_key = self.reset_key.wrapping_add(1);
} else {
self.active_page = page;
cx.emit(ItemEvent::UpdateTab);
}
cx.notify();
}
@ -690,6 +697,7 @@ impl ComponentPreview {
component.clone(),
self.workspace.clone(),
self.active_thread.clone(),
self.reset_key,
))
.into_any_element()
} else {
@ -1041,6 +1049,7 @@ pub struct ComponentPreviewPage {
component: ComponentMetadata,
workspace: WeakEntity<Workspace>,
active_thread: Option<Entity<ActiveThread>>,
reset_key: usize,
}
impl ComponentPreviewPage {
@ -1048,6 +1057,7 @@ impl ComponentPreviewPage {
component: ComponentMetadata,
workspace: WeakEntity<Workspace>,
active_thread: Option<Entity<ActiveThread>>,
reset_key: usize,
// languages: Arc<LanguageRegistry>
) -> Self {
Self {
@ -1055,6 +1065,7 @@ impl ComponentPreviewPage {
component,
workspace,
active_thread,
reset_key,
}
}
@ -1155,6 +1166,7 @@ impl ComponentPreviewPage {
};
v_flex()
.id(("component-preview", self.reset_key))
.size_full()
.flex_1()
.px_12()