diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md
index f6f81b83a5e2..4523d48d584e 100644
--- a/aio/content/guide/animations.md
+++ b/aio/content/guide/animations.md
@@ -314,7 +314,7 @@ What it does
 
 <tr>
 <td><code>animateChild()</code></td>
-<td>Allows animations on child components to be run within the same timeframe as the parent.</td>
+<td>Allows animations on child components to be run within the same timeframe as the parent. <strong>Note:</strong> Please see GitHub Issue <a href="https://github.com/angular/angular/issues/30477">#30477</a> before attempting to use <code>animateChild()</code> together with route transition animations.</td>
 </tr>
 
 </table>
diff --git a/aio/content/guide/route-animations.md b/aio/content/guide/route-animations.md
index 473c3b9d6bc5..35bcfb08910a 100644
--- a/aio/content/guide/route-animations.md
+++ b/aio/content/guide/route-animations.md
@@ -75,6 +75,11 @@ Animations can be defined directly inside your components. For this example you
 
 The following code snippet defines a reusable animation named `slideInAnimation`.
 
+<div class="alert is-important">
+
+**Note:** `animateChild()` does not currently work with route transition animations. Please see GitHub Issue <a href="https://github.com/angular/angular/issues/30477">#30477</a> for more information.
+
+</div>
 
 <code-example path="animations/src/app/animations.ts" header="src/app/animations.ts" region="route-animations" language="typescript"></code-example>
 
@@ -109,6 +114,12 @@ Use the `query()` method to find and animate elements within the current host co
 
 Assume that you are routing from the *Home => About*.
 
+<div class="alert is-important">
+
+**Note:** `animateChild()` does not currently work with route transition animations. Please see GitHub Issue <a href="https://github.com/angular/angular/issues/30477">#30477</a> for more information.
+
+</div>
+
 <code-example path="animations/src/app/animations.ts" header="src/app/animations.ts (excerpt)" region="query" language="typescript"></code-example>
 
 The animation code does the following after styling the views:
diff --git a/packages/animations/src/animation_metadata.ts b/packages/animations/src/animation_metadata.ts
index 2ad8afd1f6cb..02ba732d30ab 100755
--- a/packages/animations/src/animation_metadata.ts
+++ b/packages/animations/src/animation_metadata.ts
@@ -1114,6 +1114,10 @@ export function animation(
  * with animations that are assigned using the Angular animation library. CSS keyframes
  * and transitions are not handled by this API.
  *
+ * `animateChild()` does not currently work with route transition animations. Please see
+ * GitHub Issue {@link https://github.com/angular/angular/issues/30477 #30477} for more
+ * information.
+ *
  * @publicApi
  */
 export function animateChild(options: AnimateChildOptions|null = null):