iOS Flip Transform

iOS Flip Transform

Released 6 years ago , Last update 6 years ago

Core animation framework for navigating data by flipping. Supports 3 interaction modes - triggered, auto and controlled, and 3 content types - blank, image or text.

Animation component for the effect of flipping as in a news/clock ticker, or a page turn.

Structured around the idea of a data object (i.e. headline in news, number in a clock, page in a book) as an animation frame, comprised of multiple CALayers.

Supports 3 interaction modes:

  • Triggered: as in a tap to flip
  • Auto: as in a revolving flip that loops through data
  • Controlled: as in a pan gesture that moves the flip layer according to touch

Supports different types of content:

  • Blank, with background color
  • With image, whether from file or screenshot
  • With dynamic text, either composited on background or on image
  • 5 20
  • 4 5
  • 3 0
  • 2 0
  • 1 0
25 Reviews Read Reviews


14 day 14-day money-back guarantee


MIT license

The MIT license is an open-source license.

Basic Usage

  1. Create delegate object -
    AnimationDelegate *animationDelegate = [[AnimationDelegate alloc] initWithSequenceType: directionType:];

  2. Create flip view (either vertical or horizontal flip animation type) and assign it to animation delegate -
    FlipView *flipView = [[FlipView alloc] initWithAnimationType: animationDelegate: frame:]; animationDelegate.transformView = flipView;

  3. Add flip view as subview and customize properties (refer below for configurable list)

  4. Call [flipView printText: usingImage: backgroundColor: textColor:] to draw each frame (minimum of 2)

  5. Call [animationDelegate startAnimation:] to start the animation. For using buttons or pan gesture, look at the animation controller example

Note: To remove jagged edges during flipping, set Renders with edge antialiasing in the project plist to YES. This may decrease performance.

Configurable properties

Animation Delegate

  • repeatDelay: Length of time to the next flip after the current flip completes (only for auto interaction mode)
  • shadow: Whether or not to display shadow
  • repeat: Whether or not to loop through animation frames (only for auto interaction mode)
  • sensitivity: Positive modifier for input to animation response. Higher the sensitivity, greater the response. (only for controlled interaction mode)
  • gravity: Positive modifier for speed of movement to nearest resting state after input is removed. Higher the gravity, faster the speed. (only for controlled interaction mode)
  • perspectiveDepth: Positive value for adjusting the perspective. Lower the value, greater the illusion of depth.
  • nextDuration: duration of the next flip animation


  • textInset: inset of text relative to the flip view, like border margin
  • textOffset: positioning of text relative to top left of the flip view
  • fontSize: font size
  • font: font string, can be custom or inbuilt, defaults to Helvetica
  • fontAlignment: left, center or right alignment
  • textTruncationMode: none, start, middle or end truncation
  • sublayerCornerRadius: corner radius to apply to each sub panel of the flip view
License » MIT license Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

Or enter your name and Email
  • PR Pradeep Reddy 10 months ago
    I am not able to run the application. It throws me an error showing Apple Mach-O Linker Error - Linker command failed with exit error.
  • C ctrudo 5 years ago
    Can someone post an example of how to make this work with just an image? I am having a hard time getting this to work. This is what I have: AnimationDelegate *animateDelegate = [[AnimationDelegate alloc]initWithSequenceType:kSequenceControlled directionType:kDirectionForward]; CGRect rect = CGRectMake(20, 56, 280, 280); FlipView *flipView = [[FlipView alloc]initWithAnimationType:kAnimationFlipVertical frame:rect]; animateDelegate.transformView = flipView; flipView.frame = rect; [self.view addSubview:flipView]; animateDelegate.shadow = YES; UIImage *image = [UIImage imageWithData:imageData]; [flipView printText:nil usingImage:image backgroundColor:nil textColor:nil]; [animateDelegate startAnimation:kDirectionForward];
  • SS Steve Seo 6 years ago
    Thank you very much!!!!