[FEAT] Smooth JavaScript Tweened Transitions

[niklasgrewe]

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

[roman-rr]

@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.

Seems like a good point for new Module

Some road map for this issue:

1. Research web to identify a good proves that JS Tweens is better than CSS transitions (example)
2. Create new module to play with JS Tween transitions
3. Check performance and common feelings across devices/web/cordova apps
4. Implement basic timing functions into new Module or decide to using tween.js library
5. Merge to core and replace with css transitions

Any helps welcome 🙏