Made with Flow.
We created and shipped all 32 of these animations in two days. We drew on inspirations from Dribbble, all designs were created in Figma > here's the file. All code was exported using the iOS Toggle Button option in Flow.
Want to know how we did this so quickly? Check out our article: Animate and Ship 50 iOS Spinners in 48 hours < Different project, but the same process.
Each class has its own unique initializer. For example:
CheckInButton(frame: frame)
You can also use our convience class, like so:
Checkboxes.create(.checkin)
We offer a common, basic subclass of UIButton.
ToggleButton: UIButton {
...
}
This basic subclass handles the construction of the button, provides the space for common styling additions, and syncs playback of one or more timeliens with native UIButton methods.
Each button is a subclass of ToggleButton.
CheckInButton: ToggleButton {
...
}
Animations are written in Swift. They require a few lightweight classes that can be found in FlowCommoniOS.
Our animations take full advantage of native Core Animation, most prominently CAKeyFrameAnimation.
Here is a sample of our animation code:
let strokeEndAnimation: CAKeyframeAnimation = {
let keyframeAnimation = CAKeyframeAnimation()
keyframeAnimation.keyPath = "strokeEnd"
keyframeAnimation.values = [0.16, 0.99]
keyframeAnimation.keyTimes = [0, 1]
keyframeAnimation.timingFunctions = [.easeInEaseOut]
keyframeAnimation.duration = duration
return keyframeAnimation
}()
When we ship a cocoapod for this project, we'll update the instructions here.
For now, please download and install manually.
- Download the project.
- Install FlowCommon into your project (copy the files in this repo, or install via FlowCommoniOS).
- Copy
ToggleButton.flow - For each checkbox your want to use, copy three files into your project:
<Animation>Button.swift
<Animation>Timeline.swift
<Animation>View.swift
For example, to use the Abbaci checkbox you would copy these files:
AbbaciButton.swift
AbbaciTimeline.swift
AbbaciView.swift
We love Dribbble and a lot of the animations in this project were originally inspired by other people's great work, which we riffed on and added our own flair and rebounded with links to the original post and designer. Each checkbox is posted to Flow's Official Dribbble Account, and in the writeup for each shot we've referenced the original, and the maker.
Below is the list of all 32, and the names are identical to the enum cases in the project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent