Skip to content

feat: add per-property transition support#4

Merged
janicduplessis merged 14 commits intomainfrom
feat/per-property-transition
Mar 25, 2026
Merged

feat: add per-property transition support#4
janicduplessis merged 14 commits intomainfrom
feat/per-property-transition

Conversation

@EQuimper
Copy link
Member

@EQuimper EQuimper commented Mar 14, 2026

Summary

  • Add per-property transition support to EaseView, allowing different animation configs per animatable property (e.g., spring for opacity, timing for translateX, none for scale)
  • Implement TransitionMap type with default fallback and per-property SingleTransition overrides
  • Support type: 'none' to immediately snap a property to its target value without animation
  • Full native implementation on both iOS (Core Animation) and Android (ObjectAnimator/SpringAnimation)

API Example

<EaseView
  animate={{ opacity: 1, translateX: 100, scale: 1.2 }}
  transition={{
    default: { type: 'spring', damping: 15 },
    opacity: { type: 'timing', duration: 200 },
    scale: { type: 'none' },
  }}
/>

Solution

  • src/types.ts — new SingleTransition, TransitionMap, and updated Transition union type
  • src/EaseView.tsx — resolve per-property transition maps into flat native props (transitionOpacityType, transitionOpacityDuration, etc.)
  • src/EaseViewNativeComponent.ts — codegen props for per-property transition overrides
  • ios/EaseView.mm — resolve per-property transition config on the native side, support none type for immediate value application
  • android/EaseView.kt + EaseViewManager.kt — per-property transition resolution and none support
  • src/__tests__/EaseView.test.tsx — tests for per-property resolution, default fallback, and none behavior
  • example/src/App.tsx — demo showcasing per-property transitions
  • README.md — documentation for the new API

Test Plan

Per-Property Transitions demo — opacity fades slowly (1.5s easeInOut) while translateX bounces with a spring. The timing difference between properties is clearly visible.

iOS — iPhone 17 Pro (iOS 26.2)

pr4-ios-trimmed.mp4

Android — Android 16 emulator (arm64)

pr4-android-trimmed.mp4

Web — Chrome, 390px viewport

pr4-web-final.mp4

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants