Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/sample-router-deploy.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ jobs:
script: |
cd ~/wasm-deployment
docker load < wasm-server.tar.gz
rm -r ./wasmJsDist
mv samples/routerApp/docker-compose.yaml ./docker-compose.yaml
mv samples/routerApp/Dockerfile ./Dockerfile
mv samples/routerApp/wasmJsDist ./wasmJsDist
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ Pods/
/convention-plugins/bin/
/public.key
/samples/firebaseApp/composeApp/google-services.json
site/
113 changes: 113 additions & 0 deletions ANIMATION_PROPOSAL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
# Animation Support Feature Proposal

This directory contains documentation for proposed Compose Animation support in Compose Remote Layout.

## Overview

In response to [Issue #XX], this proposal outlines how to add Compose Animation support for remote JSON-controlled UIs. The implementation leverages the existing Custom Nodes system to provide animation capabilities without breaking existing functionality.

## What's Included

### 1. User Documentation (`03-json-structure/08-animations.md`)
Complete guide for end-users showing:
- How to use AnimatedVisibility in JSON
- How to use AnimatedContent for state transitions
- Animated modifiers (size, color)
- Practical examples with real-world use cases
- Best practices for animation design

### 2. Implementation Guide (`02-setup/06-implementing-animations.md`)
Technical guide for developers showing:
- How to implement animation custom nodes
- Code examples for AnimatedVisibility, AnimatedContent, and more
- Advanced state management with animations
- Troubleshooting and performance considerations
- Complete working examples

### 3. Quick Start Guide (`02-setup/06a-quick-start-animations.md`)
A fast-track guide to get animations working in under 10 minutes:
- Step-by-step setup
- Minimal code examples
- Common patterns (loading states, accordions)
- Troubleshooting tips

## Implementation Approach

The proposed solution uses the **Custom Nodes** system that's already built into Compose Remote Layout. This approach:

✅ **No breaking changes** - Uses existing extension points
✅ **Fully backward compatible** - Doesn't modify core library
✅ **Flexible** - Users can implement exactly the animations they need
✅ **Minimal maintenance** - Leverages standard Compose APIs
✅ **Easy to adopt** - Can be added incrementally

## Example Usage

Once implemented, users can define animations in JSON:

```json
{
"animated_visibility": {
"visible": "{isExpanded}",
"enterType": "expandVertically",
"exitType": "shrinkVertically",
"children": [
{
"text": {
"content": "Animated content!"
}
}
]
}
}
```

And control them from code:

```kotlin
val bindsValue = BindsValue()
bindsValue.setValue("isExpanded", "true") // Triggers animation
```

## Benefits

1. **Server-Driven Animations**: Update animation behavior without app deployment
2. **Consistent UX**: Define animations once, use across platforms
3. **A/B Testing**: Test different animation styles remotely
4. **Reduces App Size**: No need for multiple animation variations in app bundle
5. **Easier Iteration**: Designers can tweak animations via JSON updates

## Why This Approach?

Rather than building animations directly into the core library, this proposal uses Custom Nodes because:

1. **Flexibility**: Different apps need different animations
2. **Performance**: Apps only include the animations they use
3. **Maintenance**: No need to maintain animation code in core library
4. **Learning**: Teaches developers how to extend the library
5. **Future-Proof**: Easy to add new animation types as Compose evolves

## Future Enhancements

This foundation enables future additions:

- Animation presets library (community-contributed)
- Visual animation builder tool
- Animation performance profiling
- Platform-specific animation optimizations

## Getting Started

To implement animations in your app:

1. Read the [Quick Start Guide](docs/02-setup/06a-quick-start-animations.md)
2. Follow the [Implementation Guide](docs/02-setup/06-implementing-animations.md)
3. Reference [Animation Documentation](docs/03-json-structure/08-animations.md) for all options

## Feedback Welcome

This is a proposal. Feedback and suggestions are welcome to make animation support even better!

---

**Note**: This documentation represents a feature proposal. The actual implementation is left to app developers using the Custom Nodes system, ensuring maximum flexibility while maintaining the simplicity of the core library.
Loading