• Stars
    star
    690
  • Rank 63,228 (Top 2 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Smooth collection scrolling

Cuberto's development lab:

Cuberto is a leading digital agency with solid design and development expertise. We build mobile and web products for startups. Drop us a line.

SmoothScroll

Animation

Example

To run the example project, clone the repo and run AnimatedCollection.xcodeproj

Requirements

  • iOS 11.0+
  • Xcode 10.0

Installation

Add SmoothScroll folder to your project

Usage

  1. Create a new UICollectionView in your storyboard or nib (or instantiate it from code).

  2. Set layout to Custom and set its class to CBSmoothScrollLayout

  3. Register supplemetary views for Header, Menu and Title of kinds

  • CBSmoothScrollLayout.kCBAnimatedLayoutHeader
  • CBSmoothScrollLayout.kCBAnimatedLayoutMenu
  • CBSmoothScrollLayout.kCBAnimatedLayoutTitle respectively
  1. Check your collection view delegate to return right views from method collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath)

  2. Check your collection view delegate to conform UICollectionViewSmoothScrollLayoutDelegate protocol to provide correct size of title and handle animation progress

  3. Customize cells and supplementary views for your own purposes. You are free to inherit from base classes provided by us, or create your own from scratch

You can use provided CBViewAnimator to propagate animation state to all views that conforms to CBAnimatable protocol. Just register views to animator and call updateAnimation(toProgress progress: CGFloat) from delegate. All parts of layout can be tuned by changing params of CBSmoothScrollLayout

Author

Cuberto Design, [email protected]

License

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

More Repositories

1

liquid-swipe

Swift
2,973
star
2

bubble-icon-tabbar

Swift
1,068
star
3

flashy-tabbar

One another nice animated tabbar
Swift
687
star
4

gooey-cell

Swift
593
star
5

mouse-follower

A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.
JavaScript
553
star
6

rubber-range-picker

Swift
399
star
7

liquid-swipe-android

Kotlin
391
star
8

fluid-card

Swift
289
star
9

balloon-picker

Swift
286
star
10

3d-tap

Custom selection animation for UICollectionViewCell
Swift
240
star
11

rate-it

Swift
220
star
12

cb-tabbar

Swift
174
star
13

smooth-feed

Swift
132
star
14

flashy-tabbar-android

Java
105
star
15

bubble-icon-tabbar-android

Java
83
star
16

scroll-sequence-demo

Example of how we create a sequence scrolling effect on sites using the SmoothScroll and GSAP ScrollTrigger libraries
JavaScript
69
star
17

svg-distortion-effect-demo

This example is dedicated to how you can use the SVG Turbulence and Displacement Map filters to create an interesting switching effect for pictures and videos.
SCSS
65
star
18

reeller

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».
JavaScript
54
star
19

cursor-magnetic-demo

Example of creation cursor follower and magnetic effect
JavaScript
43
star
20

html-boilerplate

Cuberto Boilerplate that we use to start developing all our projects.
SCSS
41
star
21

jellyscroll

Library for creating jelly scrolling effect
JavaScript
37
star
22

headers-hover-demo

In this demo we have collected 7 unusual hover effects for large headers.
JavaScript
29
star
23

marquee-effect-demo

You'll find the guide how to create dynamic marquee effect in this demo.
SCSS
26
star
24

particles

Simple library for creating flying particles.
JavaScript
24
star
25

bglines

Library for creating WebGL dynamic background lines
JavaScript
20
star
26

transparentize-video-demo

This is a simple but neat technique to remove the background from a black and white video and color it using the mix-blend-mode property using pure CSS. This technique allows you to emulate various looped and dynamic spheres and shapes without using WebGL with a pre-prepared video.
JavaScript
17
star
27

liquid-tabbar

13
star