Animate Persence inconsistencies with Framer Motion API

[Omicrxn]

First and foremost, nice work forking svelte-motion because it's such a needed library in the svelte ecosystem but the lack of maintenance is horrible.

One thing I'm noticing on the Animate Presence is that the API built on the original library is quite different over Framer Motion's. I understand things like why the list is done, even though maybe it is more friendlier to let the developers put the key's themselves, with Svelte syntax like in react. However I don't know the internals so this is not really a big problem. However there is a property exitBeforeEnter which I guess it mimicks the mode="wait" of Framer Motion. I think we should copy the API's and also add the lacking mode="popLayout".

Finally there is a bug where setting initial={false} which is supposed to only remove the first render initial animation, but instead it removes all initial animations that follow.

Overall I think keeping a close syntax to Framer Motion would help to translate examples found in react, or even developers transitioning from Framer.

Thanks for the great work!

PD: I'm using Svelte 5, maybe the bug about initials is due to that, haven't tested it on Svelte 4.

[JonathonRP]

@Omicrxn, thank you for this. Yes I plan on making it closer to react framer-motion that was the main reason for forking. There is a bunch of dead code and paths that need to clean up, so ported to typescript to have confidence in cleaning up correctly and being able to add features correctly. I found that initial prop big too in my usage and I think it has to deal with using react code react always rerenders full component but svelte is different. I think we'll be able to fix using svelte 5. I have plans to add more=pop layout.

[Omicrxn]

@JonathonRP I have been looking at it and I don't even know if something like framer motion makes sense in Svelte, it's exactly what you said, framer has a lot of things around React's limitations, which aren't needed in Svelte, plus svelte/motion svelte/animate and svelte/transitions are actually very powerful. So maybe it even makes more sense to use that as a base to reduce bundle size and even follow Svelte actions as the way to use the library (no need for Motion element or motion.whatever elements). This should be further looked up but just wanted to share my random thoughts in case they help.

[JonathonRP]

@JonathonRP I have been looking at it and I don't even know if something like framer motion makes sense in Svelte, it's exactly what you said, framer has a lot of things around React's limitations, which aren't needed in Svelte, plus svelte/motion svelte/animate and svelte/transitions are actually very powerful. So maybe it even makes more sense to use that as a base to reduce bundle size and even follow Svelte actions as the way to use the library (no need for Motion element or motion.whatever elements). This should be further looked up but just wanted to share my random thoughts in case they help.

I was planning to do that too, actually but still use motion.el for API surface and keep it close to framer motion API but internally will be more svelte powered

[Omicrxn]

@JonathonRP Amazing, that would be great!

[JonathonRP]

@JonathonRP Amazing, that would be great!

Yeah major reason I decided to fork, I like the declarative nature of framer-motion and it's animations but felt it could be better implemented internally with svelte and could add a action that has the power and config of framer motion

[JonathonRP]

@Omicrxn also feel free to join discord community discussion at https://discord.gg/jS99Ns6g

[JonathonRP]

Also for the animatePresence mode='poplayout' you can use exit before enter = false and element style = position absolute and parent style position = relative this is also what is happening under the hood of mode = pop layout