Delay Animation On Route Changing

[Djordjenp]

Hi, I am currently trying to make make animation that delays on route change, in my example when we are on home page (blue background), and I wanna go to about page (by pressing red square in the middle), I want red square to expand first then for blue one to contract in that order. Is such thing possible?

Here is my example:
https://codesandbox.io/s/flip-toolkit-rout-change?file=/src/styles.css