🎉 AnimationSequence

AnimationSequence is a powerful yet intuitive Jetpack Compose library designed to simplify sequential animations in your Android apps. Easily orchestrate elegant, responsive, and hierarchical animations with minimal effort, enhancing user experience and bringing your UI to life.

---

🌍 Now with Compose Multiplatform Support!

As of version 1.1.0, AnimationSequence supports Jetpack Compose Multiplatform, allowing you to create rich animated UIs not only for Android, but also for iOS, Desktop and Web (Wasm) (where supported).

In addition:

• We’ve moved to Maven Central for publishing (JitPack doesn't support multiplatform yet!).
• New dependency coordinates: io.github.pauloaapereira:animatedsequence.

---

✨ Why Use AnimationSequence?

• ✅ Simple & Intuitive: Effortlessly animate elements sequentially.
• ✅ Multiplatform Ready: Works across Android, iOS, Desktop, and Web (Wasm).
• ✅ Highly Customizable: Full control over individual animations, delays, and transitions.
• ✅ Hierarchical Animations: Seamlessly manage nested animations.
• ✅ Robust: Efficient resource cleanup and error handling built-in.

---

🚀 Quick Start

Here's a simple example to get you started:

AnimationSequenceHost {
    AnimatedItem(index = 0) {
        Text("Hello, Compose Animations!")
    }
    AnimatedItem(index = 1) {
        Button(onClick = {}) { Text("Animated Button") }
    }
}

📖 Detailed Usage

📌 AnimationSequenceHost

The AnimationSequenceHost composable is the core of this library, managing the sequential animation flow.

Parameters:

• modifier: Modifier (optional) - Modifier to be applied to the host container.
• startByDefault: Boolean (optional, default: true) - Automatically starts animations upon composition if set to true.
• content: @Composable (scope: SequentialAnimationScope) -> Unit - The composable content, providing access to the SequentialAnimationScope for granular animation control.

SequentialAnimationScope

Provides detailed control over animations:

• enter() - Animates all items sequentially.
• exit(all: Boolean = false) - Animates exit transitions sequentially. When all is true, exits all animations simultaneously.
• enter(index: Int) - Starts the enter animation for a specific indexed item.
• exit(index: Int) - Starts the exit animation for a specific indexed item.

🖌️ AnimatedItem

Defines individual animated components within the AnimationSequenceHost.

Parameters:

• modifier: Modifier (optional) - Modifier applied to the animated content.
• index: Int - Unique identifier defining the animation order.
• delayAfterAnimation: Long (optional, default: 400ms) - Delay before the next animation starts.
• enter: EnterTransition (optional, default: fadeIn with 300ms duration) - Defines the animation when entering.
• exit: ExitTransition (optional, default: fadeOut with 300ms duration) - Defines the animation when exiting.
• content: @Composable () -> Unit - The content to be animated.

🎯 Advanced Example

Use SequentialAnimationScope for detailed control:

AnimationSequenceHost(startByDefault = false) { scope ->
    LaunchedEffect(Unit) {
        scope.enter()        // Start all animations sequentially
        scope.exit(1)        // Exit animation of item at index 1
        scope.enter(2)       // Enter animation of item at index 2
    }

    AnimatedItem(index = 0) {
        Text("First Animated Item")
    }
    AnimatedItem(index = 1) {
        Text("Second Animated Item")
    }
    AnimatedItem(index = 2) {
        Text("Third Animated Item")
    }
}

🌳 Hierarchical Animations

Effortlessly manage nested animations:

AnimationSequenceHost {
    AnimatedItem(index = 0) {
        Text("Parent Animated Text")
    }

    AnimationSequenceHost {
        AnimatedItem(index = 0) {
            Text("Child Animated Text 1")
        }
        AnimatedItem(index = 1) {
            Text("Child Animated Text 2")
        }
    }
}

When the parent exits, all children automatically perform their exit animations sequentially.

⚙️ Installation

🆕 Now available on Maven Central!

Step 1. Add the Maven Central repository (if not already included)**

In your settings.gradle.kts (or settings.gradle):

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        mavenCentral()
        // others ...
    }
}

Step 2. Add the dependency in your build.gradle.kts:

dependencies {
    implementation("io.github.pauloaapereira:animatedsequence:<version>")
}

Replace <version> with the latest release version.

▶️ Running the Samples

Want to see AnimationSequence in action? We've included a full multiplatform sample app in the sample/ folder with targets for Android, iOS, Desktop, and Web.

🛠️ Steps to Run:

1. Clone the repository

git clone https://github.com/pauloaapereira/AnimatedSequence.git
cd AnimatedSequence

---

📱 Android

If you're using Android Studio, the Android sample should be runnable right away.
The IDE will automatically detect the run configuration from the androidApp module.

---

🍏 iOS

You may need to manually create a run configuration the first time:

1. Go to Run > Edit Configurations
2. Click the + button → select iOS Application
3. Select the .xcodeproj file inside the iosApp/ folder (root of the project)
4. Choose the iosApp scheme and Debug configuration
5. Select an execution target (usually auto-selected)

✅ You can now run the iOS sample on a simulator or a real device.

---

🖥️ Desktop

To run the desktop sample:

./gradlew run

🌐 Web (Wasm)

To run the WebAssembly sample in development mode:

./gradlew wasmJsBrowserDevelopmentRun -t

🔁 The -t flag enables continuous build, so it will reload when you make changes.

🌐 The app will open in your default browser, usually at http://localhost:8080.

---

You can explore and modify each sample target in the sample/ folder as you'd like.

If you run into any issues or missing configurations, feel free to open an issue — contributions and improvements are welcome!

📌 Contribution

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📄 License

Distributed under the Apache License 2.0.

Find this repository useful? :]

Feel free to support me and my new content on:

---

Happy Animating! ✨🚀