Kodeco Forums

How To Create a Cool 3D Sidebar Animation Like in Taasky

🎓 Courses & Articles
1

Learn how to recreate the amazing 3D slide-out menu effect seen in the Taasky iOS app in Swift, using view controller containment and Core Animation.

This is a companion discussion topic for the original entry at https://www.raywenderlich.com/1813-how-to-create-a-cool-3d-sidebar-animation-like-in-taasky
2

I am new to ios.
I don’t know how to make a view controller to display when i press a cell in tableview.
In this example it changes the bg and imageview.
I don’t know how to link to a view controller.
Please help me in getting success.

3

hi Deepak: you should start with part 1 of our iOS Apprentice series: https://www.raywenderlich.com/category/ios

Screenshot 2016-04-01 18.58.46.png1121Ă—1103 304 KB

4

I started the apprentice series.
Where to get the ans for my question?

5

Hello anybody there to help me.

6

the forum for iOS Apprentice is at iOS Apprentice - kodeco.com Forums

there’s also a general forum at General Discussion - kodeco.com Forums

7

Thank you
I posted there.

8

I found that the code I will paste below works better if it comes to this paging related bug, hope this helps someone :slight_smile:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
let menuWidth = CGRectGetWidth(menuContainerView.frame)
let desiredClosingWidth = menuWidth / 2 // = 40.0
let shouldClose = scrollView.contentOffset.x >= desiredClosingWidth
if shouldClose {
scrollView.pagingEnabled = false
scrollView.setContentOffset(CGPoint(x: menuWidth, y: 0.0), animated: true)
} else {
scrollView.pagingEnabled = true
scrollView.setContentOffset(CGPointZero, animated: true)
}
}

It can probably be even more simplified, but I wanted to make it as clear as possible :slight_smile:

9

And if someone want to control to which point the menuView must be revealed to actually show etc. this does the trick:

// MARK: - UIScrollViewDelegate
func scrollViewDidScroll(scrollView: UIScrollView) {
let revealFrom: CGFloat = 40.0
scrollView.pagingEnabled = scrollView.contentOffset.x <= revealFrom
let multiplier = 1.0 / CGRectGetWidth(menuContainerView.bounds)
let offset = scrollView.contentOffset.x * multiplier
let fraction = 1.0 - offset
menuContainerView.layer.transform = transformForFraction(fraction)
menuContainerView.alpha = fraction
print(“DS: offset = (scrollView.contentOffset.x), paging: (scrollView.pagingEnabled)”)
}

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    let hideUntil: CGFloat = 40.0
    if scrollView.contentOffset.x > hideUntil {
        scrollView.setContentOffset(CGPoint(x: CGRectGetWidth(menuContainerView.frame), y: 0.0), animated: true)
    }
}
10

So interesting problem with the code that I learned from your app. I rewrote the code in Objective-C, then added some code so the menu go slide to the right of the screen and shrink as well.

See below:

// 3D side menu code
//    if (![ApplicationSettings isIOS7]) {
//        self.sideMenuView.layer.transform = [self transformForFraction:fraction];
//        self.sideMenuView.alpha = fraction;
//    }

// set menu to shrink to the right
    self.bodyView.transform= CGAffineTransformMakeScale(1  - (fraction * 0.3), 1  - (fraction * 0.3));

This code is perfect especially when you close the menu and use

self.bodyView.transform = CGAffineTransformIdentity; to reset the right view.

HOWEVER, I have this terrible bug that I just can’t seem to fix! If I have a link on the side menu that forces my app to go into the background because I"m going to a weblink. When I come back, the body view graphics are not centred properly in the view. If I don’t leave the app, it’s perfect. If I open up the menu when it’s messed up and press the same menu item to close the side menu, the view is perfect again. Any help?

The bug with your side menu system code is very vexing.

11

I don’t think it’s a bug in my side menu code—I can put it in the background and come back to it, and it looks the same. I think it’s because you tap a cell to switch to another app: if you stayed in the Taasky app, tapping a cell hides the menu, shifting the detail view to the left, so the image is centred. When your app switches to another app, the menu hides, but the offset doesn’t get reset.

Try this: showingMenu is true when you select the cell that goes to the weblink. Before switching to the other app, set showingMenu to false

1 Like
12

Hi Audrey,

Thank you for your response. I’ve tried all manners of not closing the menu, leaving it over before I leave. Still no luck…it looks like this. Is there’s a more private way to show you the picture? Of what is happening? That would be great!

13

Oh found my issue…we do a parse method for the cell before I was closing the menu…when I put the menu closing before I parse the cell it’s fine!!!

Thank you!

1 Like
14

Hi

i follow the tutorial, everything working fine and perfect the only problem i’m facing is that when there is an in-call bar top of screen, the scrollview will scroll and sidemenu will disappear also i’m using google ads in my app, whenever its subview to my mainview scrollview will scroll by it self again

i appreciate if you can help me with this again

thanks for good tutorials again

15

hi Mohammad

maybe try the scrollview delegate methods?
Apple Developer Documentation like scrollViewDidScroll or scrollViewShouldScrollToTop

17

This tutorial is more than six months old so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]