PART 1 — Creating a custom animation inspired by InVision Projects Space

Last year InVision posted a nice dribble interaction for their iOS app, I don’t think they ever released it in production. This tutorial is an example of how to achieve a similar interaction in Swift 3.

Final Interaction

The interaction contains 2 main parts:

1. A collection view with a custom layout and a parallax effect on the main image.

2. A custom view controller transition, that animates the selected cell to the detail view controller.

In the first part, I’m only going to cover how to achieve the parallax effect of the collection view controller.

If you’re not familiar with creating a custom layout using UICollectionViewLayout, you should check out Apple’s WWDC videos.

1. Parallax effect

Part 1 — Parallax Effect

To achieve the parallax effect we need to understand how layout attribute works.

An UICollectionViewLayoutAttributes object manages the layout-related attributes for a given item in a collection view. Layout objects create instances of this class when asked to do so by the collection view. In turn, the collection view uses the layout information to position cells and supplementary views inside its bounds.

We want to add a custom layout attribute “parallaxValue”, so our cell can redraw the main image with a parallax.

We subclass UICollectionViewLayoutAttributes and add a variable named parallaxValue. UICollectionViewLayoutAttributes also required to conform to NSObject, NSCopying.

subclass of UICollectionViewLayoutAttributes

We need to tell our custom layout to use a custom layout attributes class rather then the default one. So we override layoutAttributesClass to return our custom InvisionCollectionViewLayoutAttributes class.

override class var layoutAttributesClass: AnyClass {
return InvisionCollectionViewLayoutAttributes.self

In the prepare method, we pre-calculate each element frame and add it to our custom layout attributes.

override layoutAttributesClass

When returning the layout attributes for the current visible rectangle we calculate the parallaxValue and set it to our custom attribute var.

calculate parallaxValue attribute

So far we have our custom layout calculating the parallax value for each cell, now we can use this value in the cell class.

In our custom cell we override apply(_ layoutAttributes: UICollectionViewLayoutAttributes), when attributes are updated this method is called and we can update mainImageView with a new frame position.

Apply attributes to the cell
Set the frame position for parallaxValue

Congratulation! You’ve finished the first part! 💪🏾🙏🏾

What’s Next ?

Read on how to do a custom view controller transition Part 2 — Creating a custom animation inspired by InVision Projects Space

I hope you enjoyed this tutorial. You can download the final project here.

Show your support

Clapping shows how much you appreciated Wendy Abrantes’s story.