OverScroll for Compose

Easy to use but very powerful component to create over scroll effects for any composables.

• 👌 Compose style API, only 3 lines to use.
• 🎨 Built-in effects: Scale, Parallax, Alpha, Rotation, Header and EmptyHeader.
• 🪢 Combine multiple effects with only one line code.
• 🔧 Support custom animation.
• 😇 Expose over scroll meta data (offset and progress) for advanced usage.

Usage

Declare a OverScrollState, it contains over scroll meta data:

var state: OverScrollState = remember { OverScrollState() }

Wrap your composable into OverScroll

OverScroll(overScrollState = { state = it }) {
    YourComposable(){}
}

Add built-in modifiers to any composable as you wish, pass state to as parameter:

OverScroll(overScrollState = { state = it }) {
    YourComposable(){
        Box(
            modifier = Modifier
                .overScrollHeader(state)
        )
    }
}

Sample

All samples could be found in sample module.

Header	LazyColumn	Parallax	Scale

Rotation	Combine	EmptyHeader	CustomAnimation1

CustomAnimation2	Advanced

API

OverScrollState is the fundamental but important concept, it contains offSet, which indicates what offSet (in pixels) you over scroll down, and progress, which indicates what percentage you over scroll based on maxOffset (Default is 400f pixels)

For most basic usages, this library provides some useful modifiers, you could chain to any modifier in any Composables.

OverScroll Composable

• maxOffset : The max offset when over scrolling.
• animationSpec : An instance of AnimationSpec, it decides how the offset value changes, default is SpringSpec

Modifier.overScrollHeader

A speciall but useful modifier when you want your header composable follows down when over scroll. It is the most outter header container typically.

• headerHeight : Must specify a header height, default

Modifier.overScrollScale

Scale composable when over scrolling.

• maxScaleMultiple : The max scale multiple when you over scroll to the max offset.

Modifier.overScrollScaleCenter

Scale composable from center pivot when over scrolling.

• maxScaleMultiple : The max scale multiple when you over scroll to the max offset.

Modifier.overScrollParallaxVertical

Create Parallax effect for composable when over scrolling.

• maxParallaxOffset : The max translation vertically when you over scroll to the max offset.

Modifier.overScrollParallaxHorizontal

Create Parallax effect for composable when over scrolling.

• maxParallaxOffset : The max translation horizontally when you over scroll to the max offset.

Modifier.overScrollAlpha

Create alpha effect for composable when over scrolling.

• finalAlpha : The final alpha value you want when you over scroll to the max offset.

Modifier.overScrollRotationCenter

Rotate composable when over scrolling based on Z-axis.

• rotationMultiple : 1 means you want to rotate 360 degress when you over scroll to the max offset.

Modifier.overScrollRotationVertical

Rotate composable when over scrolling based on X-axis.

• rotationMultiple : 1 means you want to rotate 360 degress when you over scroll to the max offset.

Modifier.overScrollRotationHorizontal

Rotate composable when over scrolling based on Y-axis.

• rotationMultiple : 1 means you want to rotate 360 degress when you over scroll to the max offset.

License

Copyright 2022 Yifan Zhu

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Source: http://opensource.org/licenses/Apache-2.0