Open niklasgrewe opened 1 year ago
@niklasgrewe Thank you for this topic.
Component you are linked to, in example, doesn't using tween.js, but using svelte tweened
sub-function and cubicOut
animation function:
export function cubicOut(t: number) {
const f = t - 1.0;
return f * f * f + 1.0;
}
Doesn't rely on css transitions, but manipulate with top, left, right, bottom
css properties and percentages, based on function above.
Which is really looks pretty smooth on horizontal swipes with 400ms duration.
Some road map for this issue:
Any helps welcome 🙏
Hi, thank you very much for this library, i love it, really useful 👍 But i wonder, why cupertino-panes using css transitions and not tweened animation with the tween.js library for example. Is there a particular reason for this? perhaps for performance reasons?
The reason I ask is because I recently found a similar Svelte Component. The transition seemed even more smooth to me there. I don't know the exact technical differences, but I think it's related to the fact that the svelte component uses a svelte tweened store for the transition and cupertino-panes rely on css transition.
A demo of the svelte component can be found here: https://svelte.dev/repl/9116699f10ac42668e7b58d120c4bc8c?version=3.52.0