box flip 3D animation for side menu

Question

I have scrollview and inside scrollview I have 2 views as MainView and another as SideMenuView.

What I want to make animation like below.

Any idea what needs to be done to get this working?

Answer 1

Psuedo Code below:

- (void)animateSideMenu{
homeView.frame = CGRectMake(sideMenuWidth, 0.0, (self.view.frame.size.width - sideMenuWidth), self.view.frame.size.height);
[UIView animateWithDuration:1.0 delay:0.0
                    options:UIViewAnimationOptionCurveLinear
                 animations:^{
                     sideMenu.frame = CGRectMake(0.0, 0.0, sideMenuWidth, sideMenuHeight);
                     [self flipAnimation];
} completion:^(BOOL finished) {

}];
}

- (void)flipAnimation{
CABasicAnimation *yRotate = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
yRotate.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 1, 0)];
yRotate.toValue = @(M_PI * 1.5);
yRotate.duration = 0.5;
yRotate.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[sideMenu.layer addAnimation:yRotate forKey:@"yRotate"];
}

Below are the steps to develop this type of animation:

1. set the frame of homeView(Red colour view) of screen size & add pan gesture to this view.
2. set frame of sideMenu view in negative x-axis.
3. Create a responder function for pan gesture recogniser, in this function call the above mentioned animateSideMenu function.
4. Adjust the animation parameters accordingly.

Try with this & let me know if anything comes up.

Answer 2

I would not use a scrollview but rather a UIPanGestureRecognizer in which I would detect your current "pan offset" and calculate a current fraction of the animation and positions of those two views (let's simplify it so that the menu is view1 and the rest view2). Then I would simply set an appropriate transform in the .Changed state. In .Ended state I would see whether the menu is closer to being open or close and create an animation with .toValue set accordingly. You should use CAAnimations or better - Facebook pop animations because you can pause and remove them and the views stay put and not jump to their initial positions (as is often the case with UIViewAnimate).

If you need help with writing exact code you can write here and I'll edit my answer.