diff --git a/crates/components/src/overflowed_content.rs b/crates/components/src/overflowed_content.rs
index 8dd7d3e53..ab7976f8b 100644
--- a/crates/components/src/overflowed_content.rs
+++ b/crates/components/src/overflowed_content.rs
@@ -5,12 +5,39 @@ use freya_elements::elements as dioxus_elements;
 use freya_hooks::{
     use_animation,
     use_node_signal,
+    AnimDirection,
     AnimNum,
     Ease,
     Function,
     OnFinish,
 };
 
+/// Animate the content of a container when the content overflows.
+///
+/// This is primarily targeted to text that can't be fully shown in small layouts.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     rsx!(
+///         Button {
+///             OverflowedContent {
+///                 width: "100",
+///                 rect {
+///                     direction: "horizontal",
+///                     cross_align: "center",
+///                     Ferris { }
+///                     label {
+///                         "Freya is a cross-platform GUI library for Rust"
+///                     }
+///                 }
+///             }
+///         }
+///     )
+/// }
+/// ```
 #[component]
 pub fn OverflowedContent(
     children: Element,
@@ -20,22 +47,35 @@ pub fn OverflowedContent(
 ) -> Element {
     let (label_reference, label_size) = use_node_signal();
     let (rect_reference, rect_size) = use_node_signal();
+
+    let rect_width = rect_size.read().area.width();
+    let label_width = label_size.read().area.width();
+    let does_overflow = label_width > rect_width;
+
     let animations = use_animation(move |ctx| {
-        ctx.auto_start(true);
         ctx.on_finish(OnFinish::Restart);
-        (ctx.with(
+
+        ctx.with(
             AnimNum::new(0., 100.)
                 .time(duration.as_millis() as u64)
                 .ease(Ease::InOut)
                 .function(Function::Linear),
-        ),)
+        )
     });
 
-    let (progress,) = animations.get();
+    use_effect(use_reactive!(|does_overflow| {
+        if does_overflow {
+            animations.run(AnimDirection::Forward);
+        }
+    }));
+
+    let progress = animations.get();
     let progress = progress.read().as_f32();
-    let rect_width = rect_size.read().area.width();
-    let label_width = label_size.read().area.width();
-    let offset_x = ((label_width + rect_width) * progress / 100.) - rect_width;
+    let offset_x = if does_overflow {
+        ((label_width + rect_width) * progress / 100.) - rect_width
+    } else {
+        0.
+    };
 
     rsx!(
         rect {