diff --git a/components/style/gecko_bindings/sugar/ns_style_auto_array.rs b/components/style/gecko_bindings/sugar/ns_style_auto_array.rs
index 97992b3f76e..9d8c37fe743 100644
--- a/components/style/gecko_bindings/sugar/ns_style_auto_array.rs
+++ b/components/style/gecko_bindings/sugar/ns_style_auto_array.rs
@@ -6,8 +6,9 @@
 
 use crate::gecko_bindings::bindings::Gecko_EnsureStyleAnimationArrayLength;
 use crate::gecko_bindings::bindings::Gecko_EnsureStyleTransitionArrayLength;
+use crate::gecko_bindings::bindings::Gecko_EnsureStyleViewTimelineArrayLength;
 use crate::gecko_bindings::structs::nsStyleAutoArray;
-use crate::gecko_bindings::structs::{StyleAnimation, StyleTransition};
+use crate::gecko_bindings::structs::{StyleAnimation, StyleTransition, StyleViewTimeline};
 use std::iter::{once, Chain, IntoIterator, Once};
 use std::ops::{Index, IndexMut};
 use std::slice::{Iter, IterMut};
@@ -75,6 +76,18 @@ impl nsStyleAutoArray<StyleTransition> {
     }
 }
 
+impl nsStyleAutoArray<StyleViewTimeline> {
+    /// Ensures that the array has length at least the given length.
+    pub fn ensure_len(&mut self, len: usize) {
+        unsafe {
+            Gecko_EnsureStyleViewTimelineArrayLength(
+                self as *mut nsStyleAutoArray<StyleViewTimeline> as *mut _,
+                len,
+            );
+        }
+    }
+}
+
 impl<'a, T> IntoIterator for &'a mut nsStyleAutoArray<T> {
     type Item = &'a mut T;
     type IntoIter = Chain<Once<&'a mut T>, IterMut<'a, T>>;
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index b475e44ac6c..61501100c81 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -997,13 +997,13 @@ fn static_assert() {
 <%def name="impl_coordinated_property_copy(type, ident, gecko_ffi_name)">
     #[allow(non_snake_case)]
     pub fn copy_${type}_${ident}_from(&mut self, other: &Self) {
-        self.gecko.m${type.capitalize()}s.ensure_len(other.gecko.m${type.capitalize()}s.len());
+        self.gecko.m${to_camel_case(type)}s.ensure_len(other.gecko.m${to_camel_case(type)}s.len());
 
-        let count = other.gecko.m${type.capitalize()}${gecko_ffi_name}Count;
-        self.gecko.m${type.capitalize()}${gecko_ffi_name}Count = count;
+        let count = other.gecko.m${to_camel_case(type)}${gecko_ffi_name}Count;
+        self.gecko.m${to_camel_case(type)}${gecko_ffi_name}Count = count;
 
-        let iter = self.gecko.m${type.capitalize()}s.iter_mut().take(count as usize).zip(
-            other.gecko.m${type.capitalize()}s.iter()
+        let iter = self.gecko.m${to_camel_case(type)}s.iter_mut().take(count as usize).zip(
+            other.gecko.m${to_camel_case(type)}s.iter()
         );
 
         for (ours, others) in iter {
@@ -1019,7 +1019,7 @@ fn static_assert() {
 <%def name="impl_coordinated_property_count(type, ident, gecko_ffi_name)">
     #[allow(non_snake_case)]
     pub fn ${type}_${ident}_count(&self) -> usize {
-        self.gecko.m${type.capitalize()}${gecko_ffi_name}Count as usize
+        self.gecko.m${to_camel_case(type)}${gecko_ffi_name}Count as usize
     }
 </%def>
 
@@ -1033,17 +1033,17 @@ fn static_assert() {
         let v = v.into_iter();
         debug_assert_ne!(v.len(), 0);
         let input_len = v.len();
-        self.gecko.m${type.capitalize()}s.ensure_len(input_len);
+        self.gecko.m${to_camel_case(type)}s.ensure_len(input_len);
 
-        self.gecko.m${type.capitalize()}${gecko_ffi_name}Count = input_len as u32;
-        for (gecko, servo) in self.gecko.m${type.capitalize()}s.iter_mut().take(input_len as usize).zip(v) {
+        self.gecko.m${to_camel_case(type)}${gecko_ffi_name}Count = input_len as u32;
+        for (gecko, servo) in self.gecko.m${to_camel_case(type)}s.iter_mut().take(input_len as usize).zip(v) {
             gecko.m${gecko_ffi_name} = servo;
         }
     }
     #[allow(non_snake_case)]
     pub fn ${type}_${ident}_at(&self, index: usize)
         -> longhands::${type}_${ident}::computed_value::SingleComputedValue {
-        self.gecko.m${type.capitalize()}s[index % self.${type}_${ident}_count()].m${gecko_ffi_name}.clone()
+        self.gecko.m${to_camel_case(type)}s[index % self.${type}_${ident}_count()].m${gecko_ffi_name}.clone()
     }
     ${impl_coordinated_property_copy(type, ident, gecko_ffi_name)}
     ${impl_coordinated_property_count(type, ident, gecko_ffi_name)}
@@ -1720,7 +1720,8 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
                           animation-play-state animation-iteration-count
                           animation-timing-function animation-composition animation-timeline
                           transition-duration transition-delay
-                          transition-timing-function transition-property""" %>
+                          transition-timing-function transition-property
+                          view-timeline-name view-timeline-axis""" %>
 
 <%self:impl_trait style_struct_name="UI" skip_longhands="${skip_ui_longhands}">
     ${impl_coordinated_property('transition', 'delay', 'Delay')}
@@ -1903,6 +1904,9 @@ mask-mode mask-repeat mask-clip mask-origin mask-composite mask-position-x mask-
     ${impl_coordinated_property('animation', 'iteration_count', 'IterationCount')}
     ${impl_coordinated_property('animation', 'timeline', 'Timeline')}
     ${impl_coordinated_property('animation', 'timing_function', 'TimingFunction')}
+
+    ${impl_coordinated_property('view_timeline', 'name', 'Name')}
+    ${impl_coordinated_property('view_timeline', 'axis', 'Axis')}
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="XUL">
diff --git a/components/style/properties/longhands/ui.mako.rs b/components/style/properties/longhands/ui.mako.rs
index f6afd6994bd..e5a1af8cf41 100644
--- a/components/style/properties/longhands/ui.mako.rs
+++ b/components/style/properties/longhands/ui.mako.rs
@@ -352,3 +352,29 @@ ${helpers.predefined_type(
     spec="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-axis",
     rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
 )}
+
+${helpers.predefined_type(
+    "view-timeline-name",
+    "ScrollTimelineName",
+    "computed::ScrollTimelineName::none()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-name",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}
+
+${helpers.predefined_type(
+    "view-timeline-axis",
+    "ScrollAxis",
+    "computed::ScrollAxis::default()",
+    vector=True,
+    need_index=True,
+    engines="gecko",
+    animation_value_type="none",
+    gecko_pref="layout.css.scroll-driven-animations.enabled",
+    spec="https://drafts.csswg.org/scroll-animations-1/#view-timeline-axis",
+    rule_types_allowed=DEFAULT_RULES_EXCEPT_KEYFRAME,
+)}