Koloda Tinder-Like Animation Version 2. Prototyping in Pixate and Development in Swift

About a month ago we told you about how we developed Tinder-like Koloda in Swift. The animation proved successful in the community of developers and designers, so we decided to continue playing with it.

After we launched the first and simpler version of Koloda animation, Dmitry Goncharov, our designer, insisted on implementing his next idea. Also, Eugene Andreyev, our iOS developer and creator of the first Koloda animation promised to further customize calculations for frames so that any developer could make their own unique component based on our open source project.

So here’s the second chapter in our story about Koloda. This time we’ll talk about both design and development. Meanwhile you can also check the animation on Dribbble and GitHub. 

How we prototyped Koloda in Pixate

by Dmitry Goncharov

I got inspired by Tinder-like concepts and decided to elaborate on the initial idea to turn Koloda into something unusual. Surprisingly, a new concept came to me in a few hours. My idea was to get rid of the deck of cards and collect each next card from the background. 

I designed the mock up in Photoshop and used Pixate for prototyping it. Pixate is a design tool similar to InVision, Marvel, Origami, Form, and others. Even though prototyping in Pixate takes much more time than in InVision, the result looks almost like a real app. The prototype I created reproduced the behavior of cards exactly how I wanted it.

Now let’s talk a little bit about the process.

The main Pixate’s toolset includes layers, action kit, and animations. After the assets are loaded and located on the artboard, you can start working on layers, and then, proceed to reproducing interactions.

At first, I had to make the cards move horizontally and fly away from the screen once they cross a certain vertical line. I did this with the help of a simple animation which could be implemented under certain if-conditions. I also made the cards change their transparency and spin a bit during interactions.

Then, I needed to make a new card appear in a way as if it collects itself from the background, so had to stretch and scale it. I set a scale for the prototype from 3.5x (the size, when a card is still on the background) to 1x. 

For a better effect I added a few bounce animations and that was it! The prototype was ready for development. I’d like to conclude with my overall impressions of Pixate. 

Advantages: 

• Preview on mobile devices 
• Simple process of prototyping 
• No need to have specific knowledge of the animation basics 
• The prototype looks much like a real iOS or Android app 
• Convenient project sharing (export to computer, external link, or QR-code)

Disadvantages: 

• A prototype doesn’t cover all apps’ functionality and is rather intended for demonstrating separate features and interactions
• A single artboard can’t accommodate all screens of a prototype 
• No possibility to export a prototype as code
• The web app is a bit buggy 
• The basic asset kit is quite limited
• No timelines for animations (in case you’re used to After Effects)

Despite the disadvantages, Pixate is a great tool that lets designers create native clickable prototypes, reproduce navigation patterns and interactions between screens, but most importantly, it helps the whole team understand the general vector of the project development. You can watch a tutorial by Jared Lodwick to learn more about Pixate.

Now as you know a bit about prototyping Koloda, it’s time we spoke about how we developed the second version of the animation!

[Koloda animation Version 2]

How we developed Koloda v.2

by Eugene Andreyev

The main difference between the first and second versions of Koloda animation is in cards layout. The front card in the new version is placed in the middle of the screen and the back card is stretched on the background. In addition, the back card does not respond to the movement of the front card, and arrives with a bounce effect after the front card is swiped. 

Also, the second version of Koloda was easier to build because Dima made a prototype of it in Pixate. Firstly, Pixate allowed me to observe all interactions on a prototype. Secondly, I could acess Pixate studio to see all transformations applied and their order, and then, simply pass them into code without having to manually adjust anything.

Lastly, the second version of Koloda is part of a travel app, unlike the first one which was all about rock'n'roll.

[Koloda Animation Version 1]

Implementation of KolodaView v.2

To implement Dima’s animation, I had to place the cards differently, so I put the magic method frameForCardAtIndex described in the previous article (in the paragraph KolodaViewimplementation) in the public interface.

In KolodaView inheritor I overrode the method and put the cards in the following order:

override func frameForCardAtIndex(index: UInt) -> CGRect {

       if index == 0 {

           let bottomOffset:CGFloat = defaultBottomOffset

           let topOffset:CGFloat = defaultTopOffset

           let xOffset:CGFloat = defaultHorizontalOffset

           let width = CGRectGetWidth(self.frame ) - 2 * defaultHorizontalOffset

           let height = width * defaultHeightRatio

           let yOffset:CGFloat = topOffset

           let frame = CGRect(x: xOffset, y: yOffset, width: width, height: height)

           return frame

       } else if index == 1 {

           let horizontalMargin = -self.bounds.width * backgroundCardHorizontalMarginMultiplier

           let width = self.bounds.width * backgroundCardScalePercent

           let height = width * defaultHeightRatio

           return CGRect(x: horizontalMargin, y: 0, width: width, height: height)

       }

       return CGRectZero

   }

What’s going on here? We place frontCard in the middle of KolodaView, and stretch the background card with a scalePercent that equals 1.5.

Bounce animation for the background card 

Since the background card arrives with a bounce effect and changes its transparency while moving, I created a new delegate method:

KolodaView - func kolodaBackgroundCardAnimation(koloda: KolodaView) -> POPPropertyAnimation?

In this method, POPAnimation is created and passed to Koloda. Then, Koloda uses it for animating frame changes after a user swipes a card. If the delegate returns nil, it means that Koloda uses default animation.

Below you can see the implementation of this method in the delegate:

 func kolodaBackgroundCardAnimation(koloda: KolodaView) -> POPPropertyAnimation? {

       let animation = POPSpringAnimation(propertyNamed: kPOPViewFrame)

       animation.springBounciness = frameAnimationSpringBounciness

       animation.springSpeed = frameAnimationSpringSpeed

       return animation

   }

How to prevent background cards from moving?

I also added a delegate method in the new version of Koloda:

func kolodaShouldMoveBackgroundCard(koloda: KolodaView) -> Bool

If a false value is returned, it means that the interactive animation is turned off and cards that are on the background won’t move simultaneously with movements of the front card.

Here is what the animation looks like if the value is false:

And here is what it looks like if the value is true:

Hope you liked the second version of Koloda! Check it out on:

• Dribbble
• GitHub

Read also:

• How we developed Pull To Make Soup animation
• How we developed Tab Bar animation