Hi Steve, insetting you mean updating it's frame( origin.x ) during the transition?

This is the way that I initialize the gridview on the GridView.m file:

CGRect frame = CGRectMake(0, originY, self.view.frame.size.width, self.view.frame.size.height);
self.view.frame = frame;

gridView = [[IGGridView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:IGGridViewStyleDefault];
gridView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:gridView];

CGFloat rowHeight = .30;
CGFloat base = MIN(self.view.frame.size.width, self.view.frame.size.height);
gridView.rowHeight = base * rowHeight;

gridView.clipsToBounds = NO;
gridView.headerHeight = 0;
gridView.selectionType = IGGridViewSelectionTypeNone;
gridView.rowSeparatorHeight = 0;
gridView.emptyRows = NO;
gridView.alwaysBounceVertical = NO;
gridView.allowHorizontalBounce = YES;
gridView.columnWidth = [IGColumnWidth CreateWithFixedWidth:gridView.rowHeight];
gridView.columnSpacing = -cellSpacing;
gridView.dataSource = self;
gridView.delegate = self;

[gridView setShowsHorizontalScrollIndicator:NO];
[gridView setShowsVerticalScrollIndicator:NO];
[gridView registerClass:[CarouselViewCell class] forCellReuseIdentifier:@"image"];

cellSpacing = (self.view.frame.size.width / 11); // this value brings the cells together and displays 5 cell on the screen

the cellLocationInViewportChanged method on the GridView.m file:

The self.min = 0.7
The self.max = 1.1

-(void)cellLocationInViewportChanged:(CGPoint)location {
self.imageView.layer.transform = CATransform3DIdentity;
self.imageView.layer.backgroundColor = [UIColor redColor].CGColor;
CALayer* layer = [self.imageView layer];
[layer setMasksToBounds:YES];
[layer setCornerRadius:(self.imageView.frame.size.height / 2)];

CGFloat scale = [self centerLocation:location.x];
scale = ((self.max - self.min) * scale) + self.min;

BOOL isCenterCell = (scale > 1.08);
BOOL isBehindCell = (scale > .80 && scale < 1.08);;

if (isBehindCell) {
// the x calculation can be done here
}

CGPoint position = self.layer.position;
position.y = ((60 - 100) * scale) + 100;
self.layer.position = position;
[self applyScale:scale toView:self.imageView];

if (isCenterCell) {
self.layer.zPosition = 1;
}
else {
if (isBehindCell) {
self.layer.zPosition = 0.9;
}
else {
self.layer.zPosition = 0;
}
}
}

-(CGFloat)centerLocation:(CGFloat)val{
if (val >= .5){
val = 1 - val;
}

if (val <= .5){
val = val / .5;
}

return val;
}

Thank you Steve...

Thanks for the code. 

I've attached a project that tries to accomplish what you're looking for. 

You can play with the following variables in the cellLocationChanged method to tweak how severe you want the spacing: 

 CGFloat minScale = .95f;

    CGFloat spacing = itemSize;

I made some tweaks to how you're doing things, to get more accurate positioning. 

Let me know if you have any questions 

-SteveZ

Thank you so much Steve. I have tested the code but there are some missing parts that I couldn't fix. 

- the min should be 0.6 and the max should be 1.3
- There should be 5 circles visible on the screen.

I played with the parameters but I couldn't display 5 circles on the circle. The current example displays only 3 items. 

Hi Steve, I have updated the CellCarousel.zip project. I have created a class, CarouselViewController, added my code structure. If possible can you integrate your calculation to my codes? My codes display 5 items on the screen. I have also updated the min = 0.4 and max = 1.5. I cannot change these ranges as our client's request.

This is the screenshot that I need to replicate. The min and the max values in the CarouselViewController are exactly matching with the circle sizes on the screenshot. On the right side, the first cell's size starts from 0.4 and the centre circle's size is 1.5.

Like I said my only problem is displaying the second circle close to the left side and displaying the fourth circle close to the right side. Thank you Steve..

Thank you so much Steve for your great technical support!! I really appreciate it.

Hi, 

No problem. 

You can actually control that with the existing sample. 

There is a variable called spacing. This is the spacing between cells. 

You can play around with that variable until you find something that works for you. 

CGFloat spacing = scaledItemSize/2; // Try making it something like scaledItemSize/2.75 to decrease the spacing

Let me know how that works for you. 

-SteveZ

CGFloat spacing = scaledItemSize/2.1;

gives me this screenshot. I only need to adjust the spacing at the left and right side of the centre circle not all spacing in between the circles.

Thank you Steve. I really appreciate your technical support! The following setting is really nice. With the help of this parameter I am able to adjust the center view's size.

CGFloat additionalMulitper = .5f; // Increase this to make the center circle even bigger

I still need to slightly bring the circles under the centre one. Is there a way for to do this with another parameter? like distancefromcenter = .2f; will bring the circles close to the center circle. The sizes of the circles are ok except the space next to the centre circle.

Sure. 

You can't just increase the Max scale, b/c that will affect all the cells relative size. 

Instead, you need a little big of additional logic. 

I've adjusted the sample. There is a new local variable: 

CGFloat additionalMulitper = .5f; // Increase this to make the center circle even bigger

To make the center item bigger, just increase this multiplier and you should get your desired results. 

Hope this helps, 

-SteveZ