https://github.com/jasudev/scroller

You can animate in individual views based on scroll position. Developed with SwiftUI. This library supports iOS/macOS.
https://github.com/jasudev/scroller

animation animations scroll scroll-animate scroll-animation scroll-animations scrollable scrolling scrollview scrollview-component scrollviewer swift swiftui

Last synced: 3 months ago
JSON representation

You can animate in individual views based on scroll position. Developed with SwiftUI. This library supports iOS/macOS.

• Host: GitHub
• URL: https://github.com/jasudev/scroller
• Owner: jasudev
• License: mit
• Created: 2022-02-02T12:57:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-27T13:07:19.000Z (almost 3 years ago)
• Last Synced: 2023-03-04T17:45:26.452Z (almost 2 years ago)
• Topics: animation, animations, scroll, scroll-animate, scroll-animation, scroll-animations, scrollable, scrolling, scrollview, scrollview-component, scrollviewer, swift, swiftui
• Language: Swift
• Homepage:
• Size: 69.2 MB
• Stars: 31
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# **Scroller for SwiftUI**

You can animate in individual views based on scroll position. Developed with SwiftUI. This library supports iOS/macOS.

[![Platforms](https://img.shields.io/badge/Platforms-iOS%20%7C%20macOS-blue?style=flat-square)](https://developer.apple.com/macOS)

[![iOS](https://img.shields.io/badge/iOS-14.0-blue.svg)](https://developer.apple.com/iOS)

[![macOS](https://img.shields.io/badge/macOS-11.0-blue.svg)](https://developer.apple.com/macOS)

[![instagram](https://img.shields.io/badge/[email protected]?style=flat-square)](https://www.instagram.com/dev.fabula)

[![SPM](https://img.shields.io/badge/SPM-compatible-red?style=flat-square)](https://developer.apple.com/documentation/swift_packages/package/)

[![MIT](https://img.shields.io/badge/licenses-MIT-red.svg)](https://opensource.org/licenses/MIT)  

## Screenshot

|Example|Vertical|Horizontal|

|:---:|:---:|:---:|

||||

## Example

[https://fabulaapp.page.link/222](https://fabulaapp.page.link/222)  

[https://fabulaapp.page.link/223](https://fabulaapp.page.link/223)

## Usages

1. Scroller

    ```swift

    Scroller(.vertical, value: $valueV) {

        ForEach(0...5, id: \.self) { index in

            GeometryReader { proxy in

                ScrollerVContent(value: proxy.scrollerValue(.vertical))

            }

        }

    } lastContent: {

        Rectangle()

            .fill(Color.blue)

            .overlay(Text("LastView"))

            .foregroundColor(Color.white)

    }

    ```

2. Each view only needs to conform to the ScrollerContent protocol.

    ```swift

    struct ScrollerVContent: ScrollerContent {

    

        /// Bind each view's scroll-relative value. It is a value between 0 and 1.

        var value: CGFloat = 0

        

        var body: some View {

            GeometryReader { proxy in

                ScrollerInfoView(axes: .vertical, value: value, proxy: proxy)

                    .offset(y: proxy.size.height * value)

                    .padding(10)

                Rectangle().fill(Color.blue)

                    .frame(width: proxy.size.width * value, height: 5)

                    .offset(y: proxy.size.height * value)

            }

            .background(Color.orange.opacity(1.0 - value))

        }

    }

    ```

## Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. Once you have your Swift package set up, adding Scroller as a dependency is as easy as adding it to the dependencies value of your Package.swift.

```swift

dependencies: [

    .package(url: "https://github.com/jasudev/Scroller.git", .branch("main"))

]

```

## Contact

instagram : [@dev.fabula](https://www.instagram.com/dev.fabula)  

email : [[email protected]](mailto:[email protected])

## License

Scroller is available under the MIT license. See the [LICENSE](LICENSE) file for more info.