{"id":16487308,"url":"https://github.com/nerdsupremacist/fancyscrollview","last_synced_at":"2025-04-12T23:38:06.123Z","repository":{"id":41490431,"uuid":"230115401","full_name":"nerdsupremacist/FancyScrollView","owner":"nerdsupremacist","description":"A SwiftUI ScrollView Designed to imitate the App Store and Apple Music ScrollViews (with or without a Parallax Header)","archived":false,"fork":false,"pushed_at":"2021-10-29T15:08:20.000Z","size":66043,"stargazers_count":997,"open_issues_count":7,"forks_count":57,"subscribers_count":10,"default_branch":"develop","last_synced_at":"2025-04-12T23:37:57.362Z","etag":null,"topics":["app-store","apple-music","parallax","scrollview","swiftui"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nerdsupremacist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["nerdsupremacist"]}},"created_at":"2019-12-25T14:41:07.000Z","updated_at":"2025-04-06T14:51:31.000Z","dependencies_parsed_at":"2022-08-10T02:34:57.100Z","dependency_job_id":null,"html_url":"https://github.com/nerdsupremacist/FancyScrollView","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdsupremacist%2FFancyScrollView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdsupremacist%2FFancyScrollView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdsupremacist%2FFancyScrollView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nerdsupremacist%2FFancyScrollView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nerdsupremacist","download_url":"https://codeload.github.com/nerdsupremacist/FancyScrollView/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647255,"owners_count":21139081,"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":["app-store","apple-music","parallax","scrollview","swiftui"],"created_at":"2024-10-11T13:33:37.672Z","updated_at":"2025-04-12T23:38:06.100Z","avatar_url":"https://github.com/nerdsupremacist.png","language":"Swift","funding_links":["https://github.com/sponsors/nerdsupremacist"],"categories":[],"sub_categories":[],"readme":"# FancyScrollView\n\n![](Demo/FancyScrollView.gif)\n\nI spent a lot of time looking for a way to recreate the UI of the ScrollViews in Stock Apple Apps (i.e. App Store and Apple Music) inside of SwiftUI.\n\nAnd here is the result! I call it `FancyScrollView`.\nIt's a ScrollView with a few extra perks:\n\n## Fancy Blur when scrolling\nUse a `FancyScrollView` instead of a normal `ScrollView` and it will add a nice blur in the safe area. Making your View look much cleaner while scrolling!\n\n```swift\nFancyScrollView {\n\tVStack {\n\t\t...\n\t}\n}\n```\n\n**Result:**\n\n![](Demo/NoHeader.gif)\n\n## Including a Header\n\nI was really surprised by the fact I couldn't find a proper Package for adding a nice Parallax header to a ScrollView. So I included it here! And you can customize everything about it:\n\n### Scrolling Up Behavior:\n\nYou can specify one of two behaviors:\n\n```swift\npublic enum ScrollUpHeaderBehavior {\n    case parallax // Will zoom out all pretty ;)\n    case sticky // Will stay at the top\n}\n```\n\n### Scrolling Down Behavior:\n\n```swift\npublic enum ScrollDownHeaderBehavior {\n    case offset // Will move the header with the content\n    case sticky // Will stay at the top and the content will cover the header\n}\n```\n\n### Let's see them in action!\n\nHere's every combination between scrolling behaviors\n\n#### Parallax + Offset (Default):\n\nThis is the default and appears to be the most neutral and standard version of the ScrollView Header in the Market. Chances are, you want this one!\n\n```swift\nFancyScrollView(title: \"The Weeknd\",\n                headerHeight: 350,\n                scrollUpHeaderBehavior: .parallax,\n                scrollDownHeaderBehavior: .offset,\n                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {\n\t...\n}\n```\n\n**Result:**\n\n![](Demo/Parallax+Offset.gif)\n\n#### Parallax + Sticky:\n\nThis combination is designed to imitate the header from the Artist Detail View in Apple Music.\n\n```swift\nFancyScrollView(title: \"The Weeknd\",\n                headerHeight: 350,\n                scrollUpHeaderBehavior: .parallax,\n                scrollDownHeaderBehavior: .sticky,\n                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {\n\t...\n}\n```\n\n**Result:**\n\n![](Demo/Parallax+Sticky.gif)\n\n#### Sticky + Offset:\n\nThis combination is designed to imitate the header from the \"Today\" showcases in the App Store.\n\n```swift\nFancyScrollView(title: \"The Weeknd\",\n                headerHeight: 350,\n                scrollUpHeaderBehavior: .sticky,\n                scrollDownHeaderBehavior: .offset,\n                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {\n\t...\n}\n```\n\n**Result:**\n\n![](Demo/Sticky+Offset.gif)\n\n#### Sticky + Sticky:\n\nI'm not sure who's looking for this behavior, but it looks cool. So, you do you!\n\n```swift\nFancyScrollView(title: \"The Weeknd\",\n                headerHeight: 350,\n                scrollUpHeaderBehavior: .sticky,\n                scrollDownHeaderBehavior: .sticky,\n                header: { Image(...).resizable().aspectRatio(contentMode: .fill) }) {\n\t...\n}\n```\n\n**Result:**\n\n![](Demo/Sticky+Sticky.gif)\n\n## Known Issues\n\n- The pop back navigation bar gesture is broken in these. \n\t- Sorry, but I couldn't find a proper way to get access to the Gesture Recognizer without the ScrollView being the first screen in a `NavigationView`\n- The back button always appears when you have a header (Only use it for details or modals)\n\t- I didn't find a way to know whether there's a screen to go back to\n- On light mode with a header the Status Bar doesn't look great. Didn't find a way to change it to white.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdsupremacist%2Ffancyscrollview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnerdsupremacist%2Ffancyscrollview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnerdsupremacist%2Ffancyscrollview/lists"}