Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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 .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