Dynamic Page transitions

[pythoneer]

My current understanding is that you have to statically define what transition is happening for a given route. That does not really fit my requirements. What i have in mind for my user is to have the mental model of each route being layed out as cards horizontally and you transition the viewport to each card by going left and right

+-----+ +-----------+ +-----+ +-----+
|     | |  +-----+  | |     | |     |
|     | |  |     |  | |     | |     |
+-----+ |  +-----+  | +-----+ +-----+
        +-----------+

bigger square makes the current visible card that has gone one square right from the left most one. Think of it like desktop workspaces (i think they all work the similar in gnome, mac and windows now). But i can't really find a way to specify the transition at runtime currently. I've found the AnimatedRouterContext (and use_animated_router) TransitionConfig but i can't do anything with it – all the fields on TransitionConfig are private and there are no methods to potentially change it.

[pythoneer]

On the page https://wheregmis.github.io/dioxus-motion/docs/transitions it is mentioned

Keep Transitions Short

Aim for transitions between 200-300ms. Longer transitions can make your app feel sluggish, while shorter ones might be too abrupt. The default durations are optimized for most cases.

That lets me assume those are configurable. Where can i set the transition timing and where can i set the easing? I don't want to have that bouncy feeling.

[wheregmis]

https://github.com/wheregmis/dioxus-motion/blob/main/docs/src/main.rs#L47

You can just tweak the spring parameters and provide it with context. That will give you the bouncy feeling you were looking for. For other transitions except the one defined, i would recommend you to fork the dioxus-motion and add it with new transition config. If you want to bring those transitions to upstream, feel free to PR on dioxus-motion.

[wheregmis]

Eventually, i would like to add dynamic configuration support for page transition, i am just waiting for the proper way of doing it. Passing the context and consuming it seems like the best option so far.

[pythoneer]

I guess i was not very clear about the second part. I do NOT want to have the springiness of the default SlideLeft / SlideRight transitions – i guess that is the easing. One the page https://wheregmis.github.io/dioxus-motion/docs/basic_guide it says

use Tween for: Page transitions

So how do i set a new Tween for the page transition? I tried to set one with use_context_provider but i am not confident anything changed. And where is this coming from? easer::functions::Cubic::ease_in_out or is this is just a helper created locally and not part of dioxus-motion?

This is my current App component and it does not seem to pick this new tween for the page transistions up

#[component]
fn App() -> Element {

    let tween = use_signal(|| {
        let tween = Tween::new(Duration::from_secs(10));
        // let tween = tween.with_easing(|a,b,c,d| 0.0);
        tween
    });

    use_context_provider(|| tween);

    rsx! {
        document::Link { rel: "icon", href: FAVICON }
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
        Router::<Route> {}
    }
}

[wheregmis]

Yeah i think for tween we have issue. Tween wasnt performing well for page transitions so i changed the behaviour to spring. Maybe i forgot to update the docs. Both both seems like a valid issue to me. Can you create a issue for Dynamic Page Transition Config and Tween Animation for Page transition? I will try to fix it asap.