# Coordinator Pattern (c. 23): How to animate between sibling routes

**URL:** <https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315>\
**Category:** Design Patterns by Tutorials\
**Created:** [September 30, 2019, 2:59am UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315 "2019-09-30T02:59:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![alekplay](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/alekplay/32/110136_2.png) [@alekplay](https://forums.kodeco.com/u/alekplay)\
**Post date:** [September 30, 2019, 2:59am UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315/1 "2019-09-30T02:59:55Z")

</div>

I’m using the coordinator pattern as detailed in chapter 23 to manage the flow of my app, starting with an App Coordinator that manages two routes respectively – Onboarding and Home. At the end of the Onboarding route I need to switch to the Home route which the App Coordinator can do easily. However how do I go about animating the transition between these when I am popping the Onboarding route which has been displayed modally on top of the root controller and then subsequently modally presenting the Home route?

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [October 15, 2019, 12:45am UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315/2 "2019-10-15T00:45:54Z")

</div>

@jrg.developer Can you please help with this when you get a chance? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![jrg.developer](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jrg.developer/32/109958_2.png) [@jrg.developer](https://forums.kodeco.com/u/jrg.developer)\
**Post date:** [October 20, 2019, 7:25am UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315/3 "2019-10-20T07:25:13Z")

</div>

> [@alekplay](#):
>
> However how do I go about animating the transition between these when I am popping the Onboarding route which has been displayed modally on top of the root controller and then subsequently modally presenting the Home route?

Thanks for the question, @alekplay :]

Remember that design patterns are a starting point, not a concrete implementation. Thereby, there are several ways you could go about doing this! Ultimately, the one you pick depends largely on how you intend/expect this code to grow over time.

As one possibility, you could have 3 coordinators:

- A parent coordinator that owns two coordinators.
- A child coordinator for the onboarding route.
- A child coordinator for the home route.

Whenever you reach the end of the onboarding flow, you can have the onboarding child coordinator delegate back to the parent coordinator and dismiss.

In response to the delegate callback, the parent coordinator could inform the home child coordinator to start.

I like this architecture because it’s easy to grow horizontally: If/when you need new flows, you can create a new coordinator for them!

Of course, each coordinator would also have a router that it actually uses to start/end the flow and to present/dismiss intermediary controllers as appropriate.

You can have the parent coordinator instantiate these routers as well, or if you’re using an injection framework (e.g. [Swinject](https://github.com/Swinject/Swinject)), you can have it do the actual instantiation of everything.

I hope this helps!

Best of luck,

Joshua

---

<div class="post-metadata">

**Author:** ![alekplay](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/alekplay/32/110136_2.png) [@alekplay](https://forums.kodeco.com/u/alekplay)\
**Post date:** [October 20, 2019, 11:44pm UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315/4 "2019-10-20T23:44:27Z")

</div>

Thanks for your reply @jrg.developer!

I currently have a `AppCoordinator` which holds a splash screen and logic to determine which child coordinator to display, it then instantiates either two of the `HomeCoordinator` or `OnboardingCoordinator` which are displayed modally using a custom transition.

When the `OnboardingCoordinator` dismisses itself, the callback on `AppCoordinator` will instantiate and display the `HomeCoordinator`.

The problem I run into is handling the transition between the Onboarding Coordinator’s displayed view controller and the new Home Coordinator’s view controller, without revealing the App Coordinator’s splash view controller in-between.

I could dismiss the old VC, wait a second, and then present the new VC but that’s not very pretty – do you have any recommendations here?

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [November 14, 2019, 12:02pm UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315/5 "2019-11-14T12:02:39Z")

</div>

@jrg.developer Do you have any feedback about this? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![jrg.developer](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jrg.developer/32/109958_2.png) [@jrg.developer](https://forums.kodeco.com/u/jrg.developer)\
**Post date:** [November 15, 2019, 4:33am UTC](https://forums.kodeco.com/t/coordinator-pattern-c-23-how-to-animate-between-sibling-routes/83315/6 "2019-11-15T04:33:46Z")

</div>

> [@alekplay](#):
>
> I could dismiss the old VC, wait a second, and then present the new VC but that’s not very pretty – do you have any recommendations here?

Why not present the new `HomeCoordinator` and then dismiss the `OnboardingCoordinator`, without animation? At the very least, you could “hide” the dismissing of the `OnboardingCoordinator`, right?

Yowever, you _will_ need to reconsider how your `dimiss(animated:)` method works for your `Router`. E.g., the simple implementation given in this chapter looks like this:

```swift
public func dismiss(animated: Bool) {
  performOnDismissed(for:
    navigationController.viewControllers.first!)
  parentViewController.dismiss(animated: animated,
                               completion: nil)
}

```

If you choose to “dismiss” after “present,” this implementation wouldn’t work for you, because it assumes that the view controller that’s first (`navigationController.viewControllers.first!)` is the one that you want to “dismiss.”

Instead, you might consider holding onto whatever view controller is the “first” for a new type of `Router`, and use it to “dismiss.” Wherein, “dismiss” may simply mean removing it from the navigation hierarchy, without animation or changing anything after it, if it’s not the currently showing view controller, “dismissing” from a `parentViewController` without animation, etc.

I hope this idea helps you give inspiration for how you might do this! :]

Let me know how it goes when you’ve found a solution that works for you.

Cheers,  
Joshua