diff --git a/gfx/config/gfxVars.h b/gfx/config/gfxVars.h
index 4031f76fc10a..fa503349d1ee 100644
--- a/gfx/config/gfxVars.h
+++ b/gfx/config/gfxVars.h
@@ -44,6 +44,15 @@ class gfxVarReceiver;
 
   /* Add new entries above this line. */
 
+// Define the default animation backend on the compositor. Now we don't use
+// stylo on the compositor only on Android, and this is a fixed flag. If
+// we want to update this flag, please add a new gfxVars for it.
+#if defined(ANDROID)
+  #define USE_STYLO_ON_COMPOSITOR false
+#else
+  #define USE_STYLO_ON_COMPOSITOR true
+#endif
+
 // Some graphics settings are computed on the UI process and must be
 // communicated to content and GPU processes. gfxVars helps facilitate
 // this. Its function is similar to gfxPrefs, except rather than hold
diff --git a/gfx/layers/AnimationHelper.cpp b/gfx/layers/AnimationHelper.cpp
index f0126d53b2e2..feb32178f48f 100644
--- a/gfx/layers/AnimationHelper.cpp
+++ b/gfx/layers/AnimationHelper.cpp
@@ -9,6 +9,7 @@
 #include "mozilla/dom/AnimationEffectReadOnlyBinding.h" // for dom::FillMode
 #include "mozilla/dom/KeyframeEffectBinding.h" // for dom::IterationComposite
 #include "mozilla/dom/KeyframeEffectReadOnly.h" // for dom::KeyFrameEffectReadOnly
+#include "mozilla/gfx/gfxVars.h"        // for USE_STYLO_ON_COMPOSITOR
 #include "mozilla/layers/CompositorThread.h" // for CompositorThreadHolder
 #include "mozilla/layers/LayerAnimationUtils.h" // for TimingFunctionToComputedTimingFunction
 #include "mozilla/StyleAnimationValue.h" // for StyleAnimationValue, etc
@@ -276,9 +277,7 @@ AnimationHelper::SampleAnimationForEachNode(
       static_cast<dom::CompositeOperation>(segment->endComposite());
 
     // interpolate the property
-    bool isServo = animSegment.mFromValue.mServo ||
-                   animSegment.mToValue.mServo;
-    if (isServo) {
+    if (USE_STYLO_ON_COMPOSITOR) {
       dom::IterationCompositeOperation iterCompositeOperation =
           static_cast<dom::IterationCompositeOperation>(
             animation.iterationComposite());
@@ -478,6 +477,9 @@ CreateCSSValueList(const InfallibleTArray<TransformFunction>& aFunctions)
 static AnimationValue
 ToAnimationValue(const Animatable& aAnimatable)
 {
+  StyleBackendType backend = USE_STYLO_ON_COMPOSITOR
+                             ? StyleBackendType::Servo
+                             : StyleBackendType::Gecko;
   AnimationValue result;
 
   switch (aAnimatable.type()) {
@@ -488,12 +490,11 @@ ToAnimationValue(const Animatable& aAnimatable)
           aAnimatable.get_ArrayOfTransformFunction();
         RefPtr<nsCSSValueSharedList> list(CreateCSSValueList(transforms));
         MOZ_ASSERT(list, "Transform list should be non null");
-        result = AnimationValue::Transform(StyleBackendType::Gecko, *list);
+        result = AnimationValue::Transform(backend, *list);
       }
       break;
     case Animatable::Tfloat:
-      result = AnimationValue::Opacity(StyleBackendType::Gecko,
-                                       aAnimatable.get_float());
+      result = AnimationValue::Opacity(backend, aAnimatable.get_float());
       break;
     default:
       MOZ_ASSERT_UNREACHABLE("Unsupported type");