diff --git a/components/style/properties/longhands/box.mako.rs b/components/style/properties/longhands/box.mako.rs
index 7dfc15cd14e..ed7839360d9 100644
--- a/components/style/properties/longhands/box.mako.rs
+++ b/components/style/properties/longhands/box.mako.rs
@@ -379,7 +379,7 @@ ${helpers.predefined_type(
     "OffsetPath",
     "computed::OffsetPath::none()",
     products="gecko",
-    animation_value_type="none",
+    animation_value_type="ComputedValue",
     gecko_pref="layout.css.motion-path.enabled",
     flags="CREATES_STACKING_CONTEXT FIXPOS_CB",
     spec="https://drafts.fxtf.org/motion-1/#offset-path-property",
diff --git a/components/style/values/animated/mod.rs b/components/style/values/animated/mod.rs
index f09e1886170..1d0ccd6904c 100644
--- a/components/style/values/animated/mod.rs
+++ b/components/style/values/animated/mod.rs
@@ -406,3 +406,14 @@ where
         ))
     }
 }
+
+impl<T> ToAnimatedZero for Box<[T]>
+where
+    T: ToAnimatedZero,
+{
+    #[inline]
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        let v = self.iter().map(|v| v.to_animated_zero()).collect::<Result<Vec<_>, _>>()?;
+        Ok(v.into_boxed_slice())
+    }
+}
diff --git a/components/style/values/specified/motion.rs b/components/style/values/specified/motion.rs
index 87ff39d9a3a..762c1dcfdd5 100644
--- a/components/style/values/specified/motion.rs
+++ b/components/style/values/specified/motion.rs
@@ -12,7 +12,8 @@ use values::specified::SVGPathData;
 /// The offset-path value.
 ///
 /// https://drafts.fxtf.org/motion-1/#offset-path-property
-#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToComputedValue, ToCss)]
+#[derive(Animate, Clone, ComputeSquaredDistance, Debug, MallocSizeOf, PartialEq,
+         SpecifiedValueInfo, ToAnimatedZero, ToComputedValue, ToCss)]
 pub enum OffsetPath {
     // We could merge SVGPathData into ShapeSource, so we could reuse them. However,
     // we don't want to support other value for offset-path, so use SVGPathData only for now.
@@ -20,6 +21,7 @@ pub enum OffsetPath {
     #[css(function)]
     Path(SVGPathData),
     /// None value.
+    #[animation(error)]
     None,
     // Bug 1186329: Implement ray(), <basic-shape>, <geometry-box>, and <url>.
 }
diff --git a/components/style/values/specified/svg_path.rs b/components/style/values/specified/svg_path.rs
index d4583daaad7..d31d182d941 100644
--- a/components/style/values/specified/svg_path.rs
+++ b/components/style/values/specified/svg_path.rs
@@ -13,14 +13,15 @@ use std::slice;
 use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use style_traits::values::SequenceWriter;
 use values::CSSFloat;
-use values::animated::{Animate, Procedure};
+use values::animated::{Animate, Procedure, ToAnimatedZero};
 use values::distance::{ComputeSquaredDistance, SquaredDistance};
 
 
 /// The SVG path data.
 ///
 /// https://www.w3.org/TR/SVG11/paths.html#PathData
-#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToComputedValue)]
+#[derive(Clone, Debug, MallocSizeOf, PartialEq, SpecifiedValueInfo, ToAnimatedZero,
+         ToComputedValue)]
 pub struct SVGPathData(Box<[PathCommand]>);
 
 impl SVGPathData {
@@ -336,10 +337,66 @@ impl ToCss for PathCommand {
     }
 }
 
+impl ToAnimatedZero for PathCommand {
+    #[inline]
+    fn to_animated_zero(&self) -> Result<Self, ()> {
+        use self::PathCommand::*;
+        let absolute = true;
+        match self {
+            &ClosePath => Ok(ClosePath),
+            &Unknown => Ok(Unknown),
+            &MoveTo { ref point, .. } => Ok(MoveTo { point: point.to_animated_zero()?, absolute }),
+            &LineTo { ref point, .. } => Ok(LineTo { point: point.to_animated_zero()?, absolute }),
+            &HorizontalLineTo { x, .. } => {
+                Ok(HorizontalLineTo { x: x.to_animated_zero()?, absolute })
+            },
+            &VerticalLineTo { y, .. } => {
+                Ok(VerticalLineTo { y: y.to_animated_zero()?, absolute })
+            },
+            &CurveTo { ref control1, ref control2, ref point, .. } => {
+                Ok(CurveTo {
+                    control1: control1.to_animated_zero()?,
+                    control2: control2.to_animated_zero()?,
+                    point: point.to_animated_zero()?,
+                    absolute,
+                })
+            },
+            &SmoothCurveTo { ref control2, ref point, .. } => {
+                Ok(SmoothCurveTo {
+                    control2: control2.to_animated_zero()?,
+                    point: point.to_animated_zero()?,
+                    absolute,
+                })
+            },
+            &QuadBezierCurveTo { ref control1, ref point, .. } => {
+                Ok(QuadBezierCurveTo {
+                    control1: control1.to_animated_zero()?,
+                    point: point.to_animated_zero()?,
+                    absolute,
+                })
+            },
+            &SmoothQuadBezierCurveTo { ref point, .. } => {
+                Ok(SmoothQuadBezierCurveTo { point: point.to_animated_zero()?, absolute })
+            },
+            &EllipticalArc { rx, ry, angle, large_arc_flag, sweep_flag, ref point, .. } => {
+                Ok(EllipticalArc {
+                    rx: rx.to_animated_zero()?,
+                    ry: ry.to_animated_zero()?,
+                    angle: angle.to_animated_zero()?,
+                    large_arc_flag,
+                    sweep_flag,
+                    point: point.to_animated_zero()?,
+                    absolute,
+                })
+            },
+        }
+    }
+}
+
 
 /// The path coord type.
 #[derive(Animate, Clone, ComputeSquaredDistance, Copy, Debug, MallocSizeOf, PartialEq,
-         SpecifiedValueInfo, ToCss)]
+         SpecifiedValueInfo, ToAnimatedZero, ToCss)]
 #[repr(C)]
 pub struct CoordPair(CSSFloat, CSSFloat);