{"id":13637790,"url":"https://github.com/nathangitter/fluid-interfaces","last_synced_at":"2025-05-15T18:02:30.810Z","repository":{"id":41390107,"uuid":"140176620","full_name":"nathangitter/fluid-interfaces","owner":"nathangitter","description":"Natural gestures and animations inspired by Apple's WWDC18 talk \"Designing Fluid Interfaces\"","archived":false,"fork":false,"pushed_at":"2018-12-16T14:39:56.000Z","size":5752,"stargazers_count":2588,"open_issues_count":2,"forks_count":148,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-03-31T21:51:15.359Z","etag":null,"topics":["animation","fluid","gesture","interfaces","spring-animation","swift"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nathangitter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-08T14:48:27.000Z","updated_at":"2025-03-25T16:39:43.000Z","dependencies_parsed_at":"2022-08-10T02:07:11.262Z","dependency_job_id":null,"html_url":"https://github.com/nathangitter/fluid-interfaces","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathangitter%2Ffluid-interfaces","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathangitter%2Ffluid-interfaces/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathangitter%2Ffluid-interfaces/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nathangitter%2Ffluid-interfaces/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nathangitter","download_url":"https://codeload.github.com/nathangitter/fluid-interfaces/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247737788,"owners_count":20987721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","fluid","gesture","interfaces","spring-animation","swift"],"created_at":"2024-08-02T01:00:33.079Z","updated_at":"2025-04-07T22:11:05.653Z","avatar_url":"https://github.com/nathangitter.png","language":"Swift","funding_links":[],"categories":["Swift","HarmonyOS","Content","swift"],"sub_categories":["Windows Manager","Animation"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"Resources/repo-banner.png\" alt=\"Fluid Interfaces Title Graphic\"\u003e\u003c/p\u003e\n\n### Check out the accompanying blog post for more details: [Building Fluid Interfaces](https://medium.com/@nathangitter/building-fluid-interfaces-ios-swift-9732bb934bf5)\n\n⭐️ If you found this repo helpful, please star it. Thanks! ⭐️\n\n### Background\n\nAt WWDC 2018, Apple designers gave a talk titled \"Designing Fluid Interfaces\", explaining the design theory behind the gesture-based interface of iPhone X. (The presentation is available here: [Designing Fluid Interfaces](https://developer.apple.com/videos/play/wwdc2018/803/))\n\nIt was an outstanding talk, inspiring designers and developers to think about animated interfaces in a new way. While some technical guidance was provided, most code-level implementation details were ommitted.\n\nThe goal with this project is to bridge the gap between inspiration and implementation.\n\n### Installation\n\nDownload or clone the repo and open the `FluidInterfaces.xcodeproj` file with Xcode.\n\n### Interfaces\n\n[Calculator Button](#calculator-button)\n\n[Spring Animations](#spring-animations)\n\n[Flashlight Button](#flashlight-button)\n\n[Rubberbanding](#rubberbanding)\n\n[Acceleration Pausing](#acceleration-pausing)\n\n[Rewarding Momentum](#rewarding-momentum)\n\n[FaceTime PiP](#facetime-pip)\n\n[Rotation](#rotation)\n\n## Calculator Button\n\nA button that mimics the behavior of buttons in the iOS Calculator app.\n\n\u003cimg src=\"Resources/calcdemo.gif\" alt=\"Calculator Button Demo\"\u003e\n\n[⚙️ CalculatorButton.swift](FluidInterfaces/FluidInterfaces/CalculatorButton.swift)\n\n[📺 Designing Fluid Interfaces 50:13](https://developer.apple.com/videos/play/wwdc2018/803/?time=3013)\n\n## Spring Animations\n\nA demo showing the ability to define a spring animation with \"design-friendly\" parameters.\n\n\u003cimg src=\"Resources/springdemo.gif\" alt=\"Spring Demo\"\u003e\n\n[⚙️ Spring.swift](FluidInterfaces/FluidInterfaces/Spring.swift)\n\n[📺 Designing Fluid Interfaces 31:40](https://developer.apple.com/videos/play/wwdc2018/803/?time=1900)\n\n## Flashlight Button\n\nA button that mimics the behavior of the flashlight button on the lockscreen of iPhone X.\n\n\u003cimg src=\"Resources/flashdemo.gif\" alt=\"Flashlight Button Demo\"\u003e\n\n[⚙️ FlashlightButton.swift](FluidInterfaces/FluidInterfaces/FlashlightButton.swift)\n\n[📺 Designing Fluid Interfaces 37:59](https://developer.apple.com/videos/play/wwdc2018/803/?time=2279)\n\n## Rubberbanding\n\nA demo showing how to implement rubberbanding.\n\n\u003cimg src=\"Resources/rubberdemo.gif\" alt=\"Rubberbanding Demo\"\u003e\n\n[⚙️ Rubberbanding.swift](FluidInterfaces/FluidInterfaces/Rubberbanding.swift)\n\n[📺 Designing Fluid Interfaces 17:01](https://developer.apple.com/videos/play/wwdc2018/803/?time=1021)\n\n## Acceleration Pausing\n\nA demo of using a gesture's acceleration to quickly detect when the user's motion has paused.\n\n\u003cimg src=\"Resources/accelerationdemo.gif\" alt=\"Acceleration Pausing Demo\"\u003e\n\n[⚙️ Acceleration.swift](FluidInterfaces/FluidInterfaces/Acceleration.swift)\n\n[📺 Designing Fluid Interfaces 10:40](https://developer.apple.com/videos/play/wwdc2018/803/?time=640)\n\n## Rewarding Momentum\n\nA drawer with an open and closed state which has bounciness dependent on the velocity of the gesture.\n\n\u003cimg src=\"Resources/momentumdemo.gif\" alt=\"Rewarding Momentum Demo\"\u003e\n\n[⚙️ Momentum.swift](FluidInterfaces/FluidInterfaces/Momentum.swift)\n\n[📺 Designing Fluid Interfaces 36:48](https://developer.apple.com/videos/play/wwdc2018/803/?time=2208)\n\n## FaceTime PiP\n\nA re-creation of the picture-in-picture UI of the iOS FaceTime app.\n\n\u003cimg src=\"Resources/pipdemo.gif\" alt=\"FaceTime PiP Demo\"\u003e\n\n[⚙️ Pip.swift](FluidInterfaces/FluidInterfaces/Pip.swift)\n\n[📺 Designing Fluid Interfaces 41:56](https://developer.apple.com/videos/play/wwdc2018/803/?time=2516)\n\n## Rotation\n\nA demo showing how the concepts from the PiP interface can apply to other animations.\n\n\u003cimg src=\"Resources/rotationdemo.gif\" alt=\"Rotation Demo\"\u003e\n\n[⚙️ Rotation.swift](FluidInterfaces/FluidInterfaces/Rotation.swift)\n\n[📺 Designing Fluid Interfaces 47:25](https://developer.apple.com/videos/play/wwdc2018/803/?time=2845)\n\n## Author\nYou can find me on Twitter [@nathangitter](https://twitter.com/nathangitter)\n\n## Contributing\nFeel free to add issues or pull requests here on GitHub. I cannot guarantee that I will accept your changes, but feel free to fork the repo and make changes as you see fit. Thanks!\n\n## License \u0026 Copyright\n© 2018 Nathan Gitter, licensed under Apache-2.0. See LICENSE for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathangitter%2Ffluid-interfaces","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnathangitter%2Ffluid-interfaces","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnathangitter%2Ffluid-interfaces/lists"}