Swiftpack.co -  Package - gaebel/MotionEffect
Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.
Parallax & tilt motion effects for SwiftUI views. Extensible.
.package(url: "https://github.com/gaebel/MotionEffect.git", from: "1.0.1")


Ties the device's gyroscope to a SwiftUI view and makes it adapt to the phone's movement – adds depth to views and makes them more noticable. It's implemented using CoreMotion's UIMotionEffect and bridged to SwiftUI.

It comes with pre implemented motion effects like shift (parallax) and tilt, but also provides the abillity to write your own custom effects.


You can add this library as a dependency using


To access the methods in your SwiftUI view import the library.

import MotionEffect

Then call the motion function on your view and you're good to go.

You can define the axis of the effect (.horizontal, .vertical, .both) and the amount (more about this in the effects section).

.motion(effect: .shift, amount: 15, axis: .both)

You can add custom effects by creating an object that conforms to MotionEffectable.

.motion(effect: CustomEffect.self, amount: 45, axis: .both)

In some cases you want to reset the origin of the coordinate system. You can do this by binding a variable to the effect, and changing the state using a button.

iOS 14

The state automatically changes to false after the layout updated, so that you can reset the effect through every button press. It's using .onChange under the hood.

iOS 13

.onChange is not available in iOS 13. You have to take care that the state gets set to false. Otherwise your button will fire just once.

struct ContentView: View {
    @State var needsReset: Bool = false

    var body: some View {
        VStack {
            Text("Hello world")
                .frame(width: 200, height: 100)
                .shadow(radius: 10)
                .motion(effect: .tilt, amount: 45, axis: .both, needsReset: $needsReset)
            Button("Reset", action: {
                needsReset = true


Currently there are only two effects but you're free to implement your own.


Tilts the view based on the phones movement.

The parameter amount defines the tilt angle.

Shift (Parallax)

Shifts the view based on the phones movement. You can achieve a parallax effect, e.g. by using this on a blurred view under a button, or an image in a masked container.

The parameter amount defines the distance of the shift.


You can create custom effects using an object that conform to MotionEffectable.

struct ShiftMotionEffect: MotionEffectable {
    static func makeEffect(axis: MotionAxis, amount: CGFloat) -> UIInterpolatingMotionEffect {
        let effect = UIInterpolatingMotionEffect(
            keyPath: axis == .vertical ? "center.y" : "center.x",
            type: axis == .vertical ? .tiltAlongVerticalAxis : .tiltAlongHorizontalAxis

        effect.minimumRelativeValue = -amount
        effect.maximumRelativeValue = amount

        return effect


SwiftUIMotionEffect was inspired by Christian's ParallaxSwiftUI with the goal to make it extensible and provide the abillity to reset the origin of the effect's coordinate system.


SwiftUIMotionEffect is available under the MIT license. See the LICENSE file for more info.


Stars: 9
Last commit: 1 week ago

Release Notes

1 week ago

Refactoring (#9)

Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco