UIView animation in completion block starts with displacement

Question

I wrote a simple animation chain with two animations using UIView.animate , but the second animation in completion block starts not exactly from where the first animation ens so I have strange displacement to the right. Anyone could help? Maybe I did not fully understand tranfrorm property.

UIView.animate(withDuration: 3, animations: {
    self.redView.transform = self.redView.transform.translatedBy(x: 100, y: 0)
}) { (_) in
    UIView.animate(withDuration: 2, animations: {
        self.redView.transform = self.redView.transform.scaledBy(x: 2, y: 2)
    })
}

My redView should be moved to right on 100 and then from the same place became twice as large. But before second animation there is displacement to the right. I have no ideas about why this happens. Thanks!

Gif with this issue:

Answer 1

Not sure what's your intention but I'd animate the frame in the first block:

let initialFrame = redView.frame
UIView.animate(withDuration: 3, animations: {
    self.redView.frame = initialFrame.offsetBy(dx: 100, dy: 0)
}) { (_) in
    UIView.animate(withDuration: 2, animations: {
        self.redView.transform = self.redView.transform.scaledBy(x: 2, y: 2)
    })
}