framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.56k stars 748 forks source link

[BUG] MotionConfig is overridden completely once transition is used for an animation #2271

Open lemps opened 10 months ago

lemps commented 10 months ago

I was thinking of using MotionConfig to define the default transition rules for animations on my site.

However if I wanted to change a single parameter of an animation's transition later in the tree then the defaults were completely overridden.

Is it possible for the transition property of animations to only override the properties that are provided?

In my case I was using a duration and ease property to be shared globally and wanted to override the delay property of a single animation.

See the reproduction CodeSandbox here: https://codesandbox.io/s/gracious-varahamihira-3sk2ky?file=/src/Component.js

Steps to reproduce Refresh the page to see the entry animations of two elements. You can see that only the first element transition with the duration provided by MotionConfig

Expected behavior Both elements transition with the duration defined by MotionConfig and second element does it with a delay.

benface commented 4 months ago

Not to be the +1 guy, but this behavior definitely surprised me. Feels like specific transitions (including value-specific ones) should be deep-merged into the default rather than overriding it.

lochie commented 1 month ago

Bumping this. feels like <MotionConfig>'s transition config is useless if I can't add simple delay to <motion> elements without having to re-include the transition config again.

@mattgperry I'm happy to look into this if you think it should be considered.