docs: Edits to remove jargon (#42999)

PR Close #42999

aio/content/guide/complex-animation-sequences.md

@@ -22,9 +22,9 @@ Functions that control complex animation sequences are as follows:
 
 ## Animate multiple elements using query() and stagger() functions
 
-The `query()` function allows you to find inner elements within the element that is being animated. This function targets specific HTML elements within a parent component and applies animations to each element individually. Angular intelligently handles setup, teardown, and cleanup as it coordinates the elements across the page.
+The `query()` function lets you find inner elements within the element that is being animated. This function targets specific HTML elements within a parent component and applies animations to each element individually. Angular intelligently handles setup, teardown, and cleanup as it coordinates the elements across the page.
 
-The `stagger()` function allows you to define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
+The `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
 
 The Filter/Stagger tab in the live example shows a list of heroes with an introductory sequence. The entire list of heroes cascades in, with a slight delay from top to bottom.
 
@@ -42,7 +42,7 @@ The following example demonstrates how to use `query()` and `stagger()` function
 
 ## Parallel animation using group() function
 
-You've seen how to add a delay between each successive animation. But you may also want to configure animations that happen in parallel. For example, you may want to animate two CSS properties of the same element but use a different `easing` function for each one. For this, you can use the animation [`group()`](api/animations/group) function.
+You've seen how to add a delay between each successive animation. But you might also want to configure animations that happen in parallel. For example, you might want to animate two CSS properties of the same element but use a different `easing` function for each one. For this, you can use the animation [`group()`](api/animations/group) function.
 
 <div class="alert is-helpful">
 
@@ -55,7 +55,7 @@ In the following example, using groups on both `:enter` and `:leave` allow for t
 
 ## Sequential vs. parallel animations
 
-Complex animations can have many things happening at once. But what if you want to create an animation involving several animations happening one after the other? Earlier we used [`group()`](api/animations/group) to run multiple animations all at the same time, in parallel.
+Complex animations can have many things happening at once. But what if you want to create an animation involving several animations happening one after the other? Earlier you used [`group()`](api/animations/group) to run multiple animations all at the same time, in parallel.
 
 A second function called `sequence()` lets you run those same animations one after the other. Within `sequence()`, the animation steps consist of either `style()` or `animate()` function calls.
 
@@ -64,7 +64,7 @@ A second function called `sequence()` lets you run those same animations one aft
 
 ## Filter animation example
 
-Let's take a look at another animation on the live example page. Under the Filter/Stagger tab, enter some text into the **Search Heroes** text box, such as `Magnet` or `tornado`.
+Take a look at another animation on the live example page. Under the Filter/Stagger tab, enter some text into the **Search Heroes** text box, such as `Magnet` or `tornado`.
 
 The filter works in real time as you type. Elements leave the page as you type each new letter and the filter gets progressively stricter. The heroes list gradually re-enters the page as you delete each letter in the filter box.
 
@@ -92,11 +92,11 @@ For each match:
 
 ## Animation sequence summary
 
-Angular functions for animating multiple elements start with `query()` to find inner elements, for example gathering all images within a `<div>`. The remaining functions, `stagger()`, [`group()`](api/animations/group), and `sequence()`, apply cascades or allow you to control how multiple animation steps are applied.
+Angular functions for animating multiple elements start with `query()` to find inner elements, for example gathering all images within a `<div>`. The remaining functions, `stagger()`, [`group()`](api/animations/group), and `sequence()`, apply cascades or lets you control how multiple animation steps are applied.
 
 ## More on Angular animations
 
-You may also be interested in the following:
+You might also be interested in the following:
 
 * [Introduction to Angular animations](guide/animations)
 * [Transition and triggers](guide/transition-and-triggers)

aio/content/guide/reusable-animations.md

@@ -15,7 +15,7 @@ To create a reusable animation, use the [`animation()`](api/animations/animation
 
 <code-example path="animations/src/app/animations.1.ts" header="src/app/animations.ts" region="animation-const" language="typescript"></code-example>
 
-In the above code snippet, `transAnimation` is made reusable by declaring it as an export variable.
+In the preceding code snippet, `transAnimation` is made reusable by declaring it as an export variable.
 
 <div class="alert is-helpful">
 
@@ -32,7 +32,7 @@ From this point, you can import resuable animation variables in your component c
 
 ## More on Angular animations
 
-You may also be interested in the following:
+You might also be interested in the following:
 
 * [Introduction to Angular animations](guide/animations)
 * [Transition and triggers](guide/transition-and-triggers)

aio/content/guide/route-animations.md

@@ -21,7 +21,7 @@ To enable routing transition animation, do the following:
 3. Define the animation.
 
 
-Let's illustrate a router transition animation by navigating between two routes, *Home* and *About* associated with the `HomeComponent` and `AboutComponent` views respectively. Both of these component views are children of the top-most view, hosted by `AppComponent`. We'll implement a router transition animation that slides in the new view to the right and slides out the old view when the user navigates between the two routes.
+Illustrate a router transition animation by navigating between two routes, *Home* and *About* associated with the `HomeComponent` and `AboutComponent` views respectively. Both of these component views are children of the top-most view, hosted by `AppComponent`. We'll implement a router transition animation that slides in the new view to the right and slides out the old view when the user navigates between the two routes.
 
 </br>
 
@@ -51,15 +51,15 @@ In addition to `path` and `component`, the `data` property of each route defines
 
 <div class="alert is-helpful">
 
-**Note:** The `data` property names that you use can be arbitrary. For example, the name *animation* used in the example above is an arbitrary choice.
+**Note:** The `data` property names that you use can be arbitrary. For example, the name *animation* used in the preceding example is an arbitrary choice.
 
 </div>
 
 ## Router outlet
 
-After configuring the routes, tell the Angular router where to render the views when matched with a route. You can set a router outlet by inserting a `<router-outlet>` container inside the root `AppComponent` template.
+After configuring the routes, tell the Angular router where to render the views when matched with a route. Set a router outlet by inserting a `<router-outlet>` container inside the root `AppComponent` template.
 
-The `<router-outlet>` container has an attribute directive that contains data about active routes and their states, based on the `data` property that we set in the route configuration.
+The `<router-outlet>` container has an attribute directive that contains data about active routes and their states, based on the `data` property that you set in the route configuration.
 
 <code-example path="animations/src/app/app.component.html" header="src/app/app.component.html" region="route-animations-outlet"></code-example>
 
@@ -67,11 +67,11 @@ The `<router-outlet>` container has an attribute directive that contains data ab
 
 <code-example path="animations/src/app/app.component.ts" header="src/app/app.component.ts" region="prepare-router-outlet" language="typescript"></code-example>
 
-Here, the `prepareRoute()` method takes the value of the outlet directive (established through `#outlet="outlet"`) and returns a string value representing the state of the animation based on the custom data of the current active route. You can use this data to control which transition to execute for each route.
+Here, the `prepareRoute()` method takes the value of the outlet directive (established through `#outlet="outlet"`) and returns a string value representing the state of the animation based on the custom data of the current active route. Use this data to control which transition to execute for each route.
 
 ## Animation definition
 
-Animations can be defined directly inside your components. For this example we are defining the animations in a separate file, which allows us to re-use the animations.
+Animations can be defined directly inside your components. For this example you are defining the animations in a separate file, which lets us re-use the animations.
 
 The following code snippet defines a reusable animation named `slideInAnimation`.
 
@@ -105,7 +105,7 @@ During a transition, a new view is inserted directly after the old one and both
 
 Use the `query()` method to find and animate elements within the current host component. The `query(":enter")` statement returns the view that is being inserted, and `query(":leave")` returns the view that is being removed.
 
-Let's assume that we are routing from the *Home => About*.
+Assume that you are routing from the *Home => About*.
 
 <code-example path="animations/src/app/animations.ts" header="src/app/animations.ts (Continuation from above)" region="query" language="typescript"></code-example>
 
@@ -124,7 +124,7 @@ You now have a basic routable animation that animates routing from one view to a
 
 ## More on Angular animations
 
-You may also be interested in the following:
+You might also be interested in the following:
 
 * [Introduction to Angular animations](guide/animations)
 * [Transition and triggers](guide/transition-and-triggers)