A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

Overview

AnimatedCollectionViewLayout

Normally a UICollectionView has no transition effects when you scroll from one item to another. There are lots of ways to write animations for UICollectionView, but using a UICollectionViewLayout subclass is by far the simplest one. And it doesn't break any of your existing code. You can still use your UICollectionView subclass and you don't need to change your UICollectionViewCell. Just plug and enjoy.

CI Status

Parallax ZoomInOut RotateInOut Cards
CrossFade Cube Page

Example

To run the example project, clone the repo, and start iOS Example in Xcode.

Requirements

  • iOS 9.0+

Installation

CocoaPods

To integrate AnimatedCollectionViewLayout into your Xcode project using CocoaPods, specify it in your Podfile:

For Swift 4.2 or above:

pod 'AnimatedCollectionViewLayout'

For Swift 4.1 or below:

pod 'AnimatedCollectionViewLayout', '~> 0.3.0'

Carthage & SPM

Carthage and Swift Package Manager are also supported.

Usage

Get Started

Import the library where you want to use it. Create a AnimatedCollectionViewLayout object, set its animator and assign it to your UICollectionView.

import AnimatedCollectionViewLayout

// ...

let layout = AnimatedCollectionViewLayout()
layout.animator = ParallaxAttributesAnimator()
collectionView.collectionViewLayout = layout

Customization

Most of the built-in animators work best in Paging mode and they have additional parameters that you can tweak for better transitions. You can also write your own animators by implementing the protocol LayoutAttributesAnimator.

Author

Jin Wang

License

AnimatedCollectionViewLayout is available under the MIT license. See the LICENSE file for more info.

Comments
  • CubeAttributesAnimator Not Working

    CubeAttributesAnimator Not Working

    Firstly thank you for this library, exactly what i need is the library :) I tried all of Attributes Animators, they all working well but CubeAttributesAnimator not working.

    opened by bariscck 9
  • CubeAttributesAnimator screen display is strange.

    CubeAttributesAnimator screen display is strange.

    Description

    Hi,

    I use this library and choose CubeAttributesAnimator in my iOS app, but screen display is strange. When I implement photo gallery with full screen, I can only see half photo. I think it seems to be caused by a bug of internal animation logics.

    thanks :)

    Environments

    AnimatedCollectionViewLayout Version: 1.0.0 Xcode version: 11.1 Swift version: 5.1 Platform(s) running AnimatedCollectionViewLayout: iOS macOS version running Xcode: 10.15.1

    ScreenShots

    Strange Finished Pagination:

    Strange_Finished_Pagination

    Expected Collect State Finished Pagination:

    Expected_Collect_State_Finished_Pagination

    opened by fumiyasac 8
  • How to adjust collectionView Cell size appropriately when in landscape?

    How to adjust collectionView Cell size appropriately when in landscape?

    I'm using your current projects master branch. When I run the project the Parallax Collection view in portrait it looks great. The issue is when I turn it landscape the cells do not resize property( The experience should be the same as portrait - only one cell showing). Could you please fix this issue on a separate branch? Thank you!

    Here is an image illustrating the issue:

    Parallax-Image

    opened by JayceBryce 6
  • Animator folder did not included

    Animator folder did not included

    Do i need to copy the Animator folder or did i do something wrong that the code can not recognized the animator? Even though i see in your commit message that you fixed the issue the pod didn't include the animator? Thank @KelvinJin

    opened by heuism 5
  • Cell scroll with scrollToItem does not work

    Cell scroll with scrollToItem does not work

    ScrollToItem function is working well in UICollectionViewFlowLayout but after implement this layout it does not work. Hint. When viewcontroller is loaded, in viewDidLayoutSubviews cycle, it is working.

    opened by DedicatedDev 4
  • There is a question about the position parameter in the delegate

    There is a question about the position parameter in the delegate

    If I set the width and spacing of the CollectionItem, then how do I calculate the position parameter in the Delegate I need to modify the original code logic if there is a better way to deal with this ?

    opened by broccolii 4
  • How to make parallax cell not effect text?

    How to make parallax cell not effect text?

    Right not it seems like the Parallax effects the background of the cell and what's in front. I was wondering if there is a way to change this so the text on the cell is not effected by Parallax? Therefore the "Text/UILabel" does not move with the Parallax as you scroll?

    opened by JayceBryce 3
  • How do we add spacing between cells for parallax effect?

    How do we add spacing between cells for parallax effect?

    I'm currently trying to set spacing between my collection view cells. The issue is every time I scroll horizontally the cell does not reset back to where is should be.

    Please Look at image bellow!

    Here is my code:

    extension ImageCollectionViewController: UICollectionViewDelegateFlowLayout {
    override func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }
    
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return Int(Int16.max)
    }
    
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let c = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
    
        if let cell = c as? SimpleCollectionViewCell {
            let i = indexPath.row % vcs.count
            let v = vcs[i]
            cell.bind(color: v.0, imageName: v.1)
            cell.clipsToBounds = animator?.1 ?? true
        }
    
        return c
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        guard let animator = animator else { return view.bounds.size }
        return CGSize(width: view.bounds.width / CGFloat(animator.2), height: view.bounds.height / CGFloat(animator.3))
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
        return .zero
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 0
    }
    }
    

    Also here are images showing what happens:

    CollectionView

    opened by JayceBryce 3
  • Animators folder not installed with CocoaPods

    Animators folder not installed with CocoaPods

    Hi,

    When I install the library with CocoaPods the Animators folder is missing.

    captura de pantalla 2017-02-17 a las 0 17 07

    I tried pod deintegrate, pod update and pod install many times but nothing works.

    Thanks!

    opened by mhergon 2
  • Customising UI

    Customising UI

    I like LinearCardAttributesAnimator() but I need to customize it. Is it possible to make it more linear, without zoom effect and place cells very close to each other?

    opened by antonijap 1
  • Added import-UIKit to UIView+Anchor.swift

    Added import-UIKit to UIView+Anchor.swift

    Added import statement to top of the file, otherwise compilation will fail if inclusion is done by copying over sources. Other swift files are already so.

    opened by naldikt 1
  • Importing this library has no effect

    Importing this library has no effect

    ParallaxAttributesAnimator has no effect why ?

    lazy var baseCollectionView: UICollectionView = { let layout = AnimatedCollectionViewLayout() layout.animator = ParallaxAttributesAnimator() layout.itemSize = CGSize(width: UIScreen.main.bounds.width, height: 200) layout.minimumLineSpacing = 0 layout.minimumInteritemSpacing = 0 layout.scrollDirection = .horizontal let baseView = UICollectionView(frame: CGRect(x: 0, y: 90, width: UIScreen.main.bounds.width, height: 200), collectionViewLayout: layout) baseView.isPagingEnabled = true baseView.delegate = self baseView.dataSource = self baseView.collectionViewLayout = layout baseView.register(BannerCollectionViewCell.self, forCellWithReuseIdentifier: "BannerCollectionViewCell") return baseView }()

    opened by yangweiyi 0
  • On vertical scroll with sections, unexpected behaviour. Cells appear in front of others

    On vertical scroll with sections, unexpected behaviour. Cells appear in front of others

    When sections are being used it breaks the logic

    attributes.zIndex = attributes.indexPath.row -> PageAttributeAnimator.swift

    Given a zIndex will determine depth when using indexPath values e.g [0,1], sections, row respectively. We run into issues when the section resets.

    I don't know of a cleaner solution, but what I've been using at the moment is

    var section = attributes.indexPath.section
    var numItems = 0
    
    while section >= 0 {
        numItems += collectionView.numberOfItems(inSection: section)
        section -= 1
    
    attributes.zIndex = attributes.indexPath.row + numItems
    

    Which seems to be doing the trick, my run into performance issues when using larger data sets. A more elegant solution will be to use visible cells and work out within the two cells an appropriate zIndex.

    Happy for suggestions to make a PR

    opened by Johnathan-Aretos 0
  • Having trouble with Cube Animator w/ programmatic cells

    Having trouble with Cube Animator w/ programmatic cells

    Hi.

    The layout looks broken when using a cell programmatically. What am I missing? What could be different between the configuration of the cell in the Sample project in the storyboard and my own?

    I narrowed the problem down to cell configuration because if I copy the Sample project's storyboard and viewControllers, I am about to successfully display and scroll the collectionview. As soon as I replace the Sample cell with my own, it fails.

    I tore down the cell to the bare minimum

    class MyCustomCell: UICollectionViewCell {
      // nothing    
    }
    

    and still, I get something like: Screen Shot 2020-10-19 at 4 00 19 PMScreen Shot 2020-10-19 at 4 00 25 PM

    I'm on v 1.10, using SwiftPM, testing on iPhone SE Simulator iOS 13.5 And 14. I'm just trying to test out a full screen collectionview exactly like the sample project, only programmatic, and using my own cell.

    opened by GalCohen 9
  • Scroll by button tap

    Scroll by button tap

    Hi. I trying to add the possibility for scroll left/right by a button tap. It is possible? Please help someone.

    In "#selector" i put code below, but it not work :

    mainCollection.scrollToItem(at: IndexPath(item: item, section: 0), at: .centeredHorizontally, animated: true)

    Thanks

    opened by Yavorskyy408 1
Releases(1.1.0)
  • 1.1.0(Sep 20, 2020)

    Changed

    • Fixed an issue where on iOS 14, changing contentView's frame property won't effect. This applies to ParallaxAttributesAnimator and CubeAttributesAnimator.
    • Updated the projects to use Xcode 12.

    Removed

    • Dropped iOS 8 support.
    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Dec 3, 2019)

  • 1.0.0(Oct 18, 2019)

  • 0.6.0(Mar 27, 2019)

  • 0.5.0(Nov 30, 2018)

  • 0.4.0(Sep 19, 2018)

  • 0.3.0(May 12, 2017)

  • 0.2.0(Feb 23, 2017)

    Added

    • Added SnapInAttributesAnimator. cddea2f75517fc0ef3e63d05fd2e07c46708fb21
    • Added scrollDirection, startOffset, midOffset, endOffset as extra properties to AnimatedCollectionViewLayoutAttributes, d539aee9f8a7fff0913a3a2b41d51a41c1811db9
    • More documentations

    Changed

    • [Breaking] Renamed PagerCollectionViewLayoutAttributes to AnimatedCollectionViewLayoutAttributes. 34cf7a8fa3b2264b52e489520c09ed4d08798b48
    • [Breaking] Renamed CrossFadeAttributeAnimator to CrossFadeAttributesAnimator. cddea2f75517fc0ef3e63d05fd2e07c46708fb21
    • [Breaking] Renamed LinearCardAttributeAnimator to LinearCardAttributesAnimator. cddea2f75517fc0ef3e63d05fd2e07c46708fb21
    • [Breaking] Renamed CubeAttributeAnimator to CubeAttributesAnimator. cddea2f75517fc0ef3e63d05fd2e07c46708fb21
    • [Breaking] Renamed PageAttributeAnimator to PageAttributesAnimator. cddea2f75517fc0ef3e63d05fd2e07c46708fb21
    • [Breaking] Removed position property from the animator delegate method and put it into AnimatedCollectionViewLayoutAttributes. d539aee9f8a7fff0913a3a2b41d51a41c1811db9

    Removed

    • Removed TurnAttributesAnimator. 789e5100e5b2e9571ebcd04ac4192cc7760c9232
    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Feb 17, 2017)

  • 0.1.1(Feb 9, 2017)

  • 0.1.0(Feb 9, 2017)

    The first version of AnimatedCollectionViewLayout. With the following features:

    • Support paging mode.
    • Support full screen cells.
    • 7 builtin Animators + custom animators.
    Source code(tar.gz)
    Source code(zip)
Owner
Jin Wang
Love Swift, Love iOS. A programmer & a gamer.
Jin Wang
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations.

SamuraiTransiton is a ViewController transition framework in Swift. It is an animation as if Samurai cut out the screen with a sword. transition types

hachinobu 273 Dec 29, 2022
API to make great custom transitions in one method

AZTransitions Make your modal transition with custom animation. AZTransitions helps you think about creativity, giving specific API methods. Visual Ex

Alexander 418 Aug 4, 2022
Simple UIButton subclass with additional state change animations (e.g. backgroundColor) and missing features

SimpleButton UIButton subclass with animated, state-aware attributes. Easy to subclass and configure! Full API docs Usage Just create your own SimpleB

Andreas Tinoco Lobo 169 Sep 14, 2022
Build complex, conducted animations declaratively without manually managing state.

Maestro Build complex, conducted animations declaratively without manually managing state. Code struct AnimatedPieChart: View { private enum Trim

Ryan Wachowski 5 Nov 20, 2022
Chain multiple UIView animations without endlessly nesting in completion closures.

⛓ Chain multiple UIView animations without endlessly nesting in completion closures. Used in some of the more superfluous animations in the OK Video app.

Pim 78 Dec 26, 2022
A collection of animations for iOS. Simple, just add water animations.

DCAnimationKit A collection of animations for iOS Simply, just add water! DCAnimationKit is a category on UIView to make animations easy to perform. E

Dalton 797 Sep 23, 2022
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
Garland View seamlessly transitions between multiple lists of content.

Garland View seamlessly transitions between multiple lists of content. We specialize in the designing and coding of custom UI for Mobile

Ramotion 504 Jul 31, 2022
Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers

Ease is an event driven animation system that combines the observer pattern with custom spring animations as observers. It's magic. Features Animate a

Robert-Hein Hooijmans 1.3k Nov 17, 2022
Custom MacBook keyboard backlight animations

KBPulse Pulse the backlight on your Mac keyboard Demo Configuration Configuration files (.json) are stored in ~/Documents/KBPulse. (This location will

Ethan Chaffin 10 Aug 11, 2022
Easily build advanced custom animations on iOS.

INTUAnimationEngine makes it easy to build advanced custom animations on iOS. INTUAnimationEngine provides a friendly interface to drive custom animat

Intuit 1.1k Dec 14, 2022
A library of custom iOS View Controller Animations and Interactions.

RZTransitions is a library to help make iOS7 custom View Controller transitions slick and simple. Installation CocoaPods (Recommended) Add the followi

Rightpoint 1.9k Nov 20, 2022
UIView category that adds shake animation

UIView category that adds a shake animation like the password field of the OSX login screen. Screenshot Setup with CocoaPods Add pod 'UIView+Shake' to

Andrea Mazzini 498 Nov 20, 2022
Shimmer: A super-light modifier that adds a shimmering effect to any SwiftUI View

SwiftUI-Shimmer ✨ Shimmer is a super-light modifier that adds a shimmering effec

Vikram Kriplaney 389 Jan 2, 2023
MotionScape is your animations playground as a developer.

MotionScape is your animations playground as a developer. You can see all animations and their parameters in effect with beautifully designed and handcrafted animation examples.

Stream 127 Dec 24, 2022
Cool wave like transition between two or more UICollectionView

CKWaveCollectionViewTransition This is a cool custom transition between two or more UICollectionViewControllers with wave-like cell animation. Could b

Cezary Kopacz 1.9k Oct 4, 2022
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

appssemble 544 Dec 28, 2022