Is a Svelte-like generic crossfade animation achievable with Leptos?

[GabrielBarbosaGV]

Hello, and a good day!

I am trying to write a Svelte-like crossfade animation in Leptos, and wondering if an implementation using NodeRefs is possible. The intent is to obtain an element's characteristics, place it in the DOM with transitions for position change, and then set the element on the destination.

This is my naive starting point:

use std::time::Duration;

use leptos::{*, html::Div};

#[component]
fn App(cx: Scope) -> impl IntoView {
    let (div_is_left, set_div_is_left) = create_signal(cx, true);
    let (div_is_right, set_div_is_right) = create_signal(cx, false);

    let left_node_ref: NodeRef<Div> = create_node_ref(cx);
    let moving_node_ref: NodeRef<Div> = create_node_ref(cx);
    let right_node_ref: NodeRef<Div> = create_node_ref(cx);

    let swap_right = move || {
        // How to move the div?
        set_div_is_left(false);

        set_timeout(move || {
            set_div_is_right(true);
        }, Duration::from_millis(500));
    };

    let swap_left = move || {
        // how to move the div?
        set_div_is_right(false);

        set_timeout(move || {
            set_div_is_left(true);
        }, Duration::from_millis(500));
    };

    view! { cx,
        <div class="flex flex-row justify-around items-center w-[100vw] h-[100vh]">
            <div
                class="w-[30vw] h-[70vh] bg-blue-300 flex justify-center items-center"
                node_ref=left_node_ref
            >
                {
                    move || if div_is_left() {
                        view! { cx,
                            <div class="w-[20vw] h-[20vh] bg-gray-100 flex justify-center items-center">
                                "Hello!"
                            </div>
                        }
                    } else {
                        view! { cx,
                            <div></div>
                        }
                    }
                }
            </div>

            <button
                class="bg-red-200 p-8"
                on:click=move |_| {
                    if div_is_left() {
                        swap_right();
                    } else if div_is_right() {
                        swap_left();
                    }
                }
            >
                "Click me to change sides"
            </button>

            <div node_ref=moving_node_ref>
            </div>

            <div
                class="w-[30vw] h-[80vh] bg-green-300 flex justify-center items-center"
                node_ref=right_node_ref
            >
                {
                    move || if div_is_right() {
                        view! { cx,
                            <div class="w-[20vw] h-[20vh] bg-gray-100 flex justify-center items-center">
                                "Hello!"
                            </div>
                        }
                    } else {
                        view! { cx,
                            <div></div>
                        }
                    }
                }
            </div>
        </div>
    }
}

fn main() {
    mount_to_body(|cx| view! { cx, <App /> });
}

I've tried obtaining the HTMLElement and assigning it to the moving div, and NodeRef.clone_from() - is my approach misguided? I still have to dive deeper into Leptos, and this is just a protoype, but I'd like to make sure my attempt is on the right tracks.

Many thanks!

[gbj]

I'm not familiar with Svelte's animations, but what you're trying to do sounds like it could be done pretty easily with a CSS animation: just toggling a left or right class on each of your two elements and then using CSS to animate the transition between the two?

[gbj]

That sounds fine to me. I don't really do any animation work so you probably have a better insight into it than I do. From the framework perspective, since we're just working with DOM nodes it doesn't really matter if you decide to drop down and do manual DOM node manipulation. It seems pretty contained within the component, so I can't imagine anything that would go wrong.

[diversable]

You may want to try using the F.L.I.P. method for the animation - I think that's how svelte does it under the hood.

For a good explanation, with example code, see: https://aerotwist.com/blog/flip-your-animations/

[GabrielBarbosaGV]

Thank you for your replies!

@diversable I see! That's simpler than I'd thought - I will try to implement it. Thanks!

@gbj Oh, OK! In that case, I will experiment a bit to achieve the desired effect. It might not even be necessary, but is it possible to have two divs with respective NodeRefs, and then, through those NodeRefs, have the second div copy the properties of the first one, such as height, margin, or even innerHTML?

[gbj]

If you want to clone a node with all its attributes/properties and children, you can use .clone_node_with_deep(true). Note that this doesn't clone event listeners. Otherwise, you can do this manually by copying over whichever attributes you want.

[GabrielBarbosaGV]

Hello again!

This chonky boi did it:

use leptos::{*, html::Div};

#[derive(Clone)]
struct ListItem {
    text: String,
    id: usize,
    node_ref: NodeRef<Div>
}

#[component]
fn App(cx: Scope) -> impl IntoView {
    let items: Vec<_> = vec![
        "String one",
        "String two",
        "String three"
    ].iter()
        .map(|s| s.to_string())
        .enumerate()
        .map(|(i, s)| ListItem {
            text: s,
            id: i,
            node_ref: create_node_ref(cx)
        })
        .map(|i| create_signal(cx, i))
        .collect();

    let (items, _) = create_signal(cx, items);
    let (left_list, set_left_list) = create_signal(cx, items());
    let (right_list, set_right_list) = create_signal(cx, Vec::<(ReadSignal<ListItem>, WriteSignal<ListItem>)>::new());

    let move_item_right = move |id: usize| {
        let removed_element = items()
            .into_iter()
            .filter(|(item, _)| item().id == id)
            .next()
            .unwrap();

        let node_ref = removed_element.0().node_ref;

        let html_element = node_ref.get().unwrap();

        let bounding_client_rect = html_element.get_bounding_client_rect();

        let old_top = bounding_client_rect.top();
        let old_left = bounding_client_rect.left();

        let left_list = left_list()
            .into_iter()
            .filter(|(item, _)| item().id != id)
            .collect();

        set_left_list(left_list);

        let mut right_list = right_list();

        right_list.push(removed_element);

        set_right_list(right_list);

        let html_element = node_ref.get().unwrap();

        let bounding_client_rect = html_element.get_bounding_client_rect();

        let new_top = bounding_client_rect.top();
        let new_left = bounding_client_rect.left();

        let translateY = old_top - new_top;
        let translateX = old_left - new_left;

        let translate = format!("translate({translateX}px, {translateY}px)");

        html_element.clone().style("transform", translate);

        // Triggering reflow
        html_element.clone().offset_width();

        html_element.clone().style("transition", "transform 1s");
        html_element.clone().style("transform", "");
    };

    view! { cx,
        <div class="h-[100vh] w-[100vw] bg-gray-800 flex flex-row justify-around items-center">
            <div class="h-[80vh] w-[20vw] bg-blue-200 flex flex-col justify-around items-center">
                <span>"I am list one!"</span>

                <div class="h-[70vh] flex flex-col justify-around items-center">
                    <For
                        each=left_list
                        key=|i| i.0().id
                        view=move |cx, (item, _)| {
                            let node_ref = item().node_ref;

                            let text = move || item().text;

                            view! { cx,
                                <div
                                    node_ref=node_ref
                                    on:click=move |_| move_item_right(item().id)
                                >
                                    <span class="cursor-pointer">{text}</span>
                                </div>
                            }
                        }
                    />
                </div>
            </div>

            <div class="h-[80vh] w-[20vw] bg-blue-200 flex flex-col justify-around items-center">
                <span>"I am list two!"</span>

                <div class="h-[70vh] flex flex-col justify-around items-center">
                    <For
                        each=right_list
                        key=|i| i.0().id
                        view=move |cx, (item, _)| {
                            let node_ref = item().node_ref;

                            let text = move || item().text;

                            view! { cx,
                                <div
                                    node_ref=node_ref
                                >
                                    <span class="cursor-pointer">{text}</span>
                                </div>
                            }
                        }
                    />
                </div>
            </div>
        </div>
    }
}

fn main() {
    mount_to_body(|cx| view! { cx, <App /> })
}

I will later attempt to make this reusable.

Many thanks for your help!

[GabrielBarbosaGV]

@gbj Good day!

I've written a more generic approach:

use core::ops::Deref;
use leptos::{
    html::{Div, ElementDescriptor},
    *,
};
use std::{collections::HashMap, hash::Hash, time::Duration};
use web_sys::HtmlElement;

#[derive(Debug)]
pub enum FlipError<T> {
    GetReflowTargetFromNodeRefError,
    GetHtmlElementFromNodeRefsError(T),
}

struct TransformData<T>
where
    T: ElementDescriptor + 'static,
{
    node_ref: NodeRef<T>,
    position: (f64, f64),
}

impl<T> TransformData<T>
where
    T: ElementDescriptor,
{
    pub fn node_ref(&self) -> NodeRef<T> {
        self.node_ref
    }

    pub fn position(&self) -> (f64, f64) {
        self.position
    }
}

pub struct Flipper<T, V, U>
where
    V: ElementDescriptor + 'static + Clone + Deref<Target = U>,
    T: Hash + Eq + Copy,
    U: Deref<Target = HtmlElement>,
{
    mapping: HashMap<T, NodeRef<V>>,
    flip_initial_state: Option<HashMap<T, TransformData<V>>>,
    reflow_target: NodeRef<Div>,
}

impl<T, V, U> Flipper<T, V, U>
where
    V: ElementDescriptor + 'static + Clone + Deref<Target = U>,
    T: Hash + Eq + Copy,
    U: Deref<Target = HtmlElement>,
{
    pub fn new(
        pairs: impl IntoIterator<Item = (T, NodeRef<V>)>,
        reflow_target: NodeRef<Div>,
    ) -> Self {
        Flipper {
            mapping: pairs.into_iter().collect(),
            flip_initial_state: None,
            reflow_target,
        }
    }

    fn get_ids_to_transform_data_from_node_refs(&self) -> HashMap<T, Option<TransformData<V>>> {
        self.mapping
            .clone()
            .into_iter()
            .map(|(id, node_ref)| {
                let html_element = node_ref.get();

                let transform_data = match html_element {
                    Some(html_element) => {
                        let bounding_client_rect = html_element.get_bounding_client_rect();

                        let left = bounding_client_rect.left();
                        let top = bounding_client_rect.top();

                        Some(TransformData {
                            node_ref,
                            position: (left, top),
                        })
                    }
                    None => None,
                };

                (id, transform_data)
            })
            .collect()
    }

    pub fn prepare_flip(
        &mut self,
    ) -> Result<impl FnOnce() -> Result<(), FlipError<Vec<T>>> + '_, FlipError<Vec<T>>> {
        let ids_to_transform_data = self.get_ids_to_transform_data_from_node_refs();

        let results = ids_to_transform_data.into_iter().collect::<Vec<_>>();

        let failures: Vec<_> = results.iter().filter(|(_, td)| td.is_none()).collect();

        if failures.len() > 0 {
            let errors: Vec<_> = failures.iter().map(|(id, _)| id.to_owned()).collect();

            let error = FlipError::GetHtmlElementFromNodeRefsError(errors);

            Err(error)
        } else {
            let successes = results;

            self.flip_initial_state = Some(
                successes
                    .into_iter()
                    .map(|(id, td)| (id, td.unwrap()))
                    .collect(),
            );

            Ok(|| self.flip())
        }
    }

    fn flip(&self) -> Result<(), FlipError<Vec<T>>> {
        let ids_to_transform_data = self.get_ids_to_transform_data_from_node_refs();

        let results: Vec<_> = ids_to_transform_data.into_iter().collect();

        let failures: Vec<_> = results.iter().filter(|(_, td)| td.is_none()).collect();

        if failures.len() > 0 {
            let errors = failures.iter().map(|(id, _)| id.to_owned()).collect();

            let error = FlipError::GetHtmlElementFromNodeRefsError(errors);

            Err(error)
        } else {
            let flip_final_state: HashMap<_, _> = results.into_iter().collect();

            let flip_initial_state = &self.flip_initial_state;

            flip_initial_state
                .as_ref()
                .unwrap()
                .iter()
                .for_each(|(id, td)| {
                    let (old_left, old_top) = td.position();

                    let (new_left, new_top) = flip_final_state
                        .get(id)
                        .as_ref()
                        .unwrap()
                        .as_ref()
                        .unwrap()
                        .position();

                    let left = old_left - new_left;
                    let top = old_top - new_top;

                    td.node_ref()
                        .get()
                        .unwrap()
                        .clone()
                        .style("transform", &format!("translate({left}px, {top}px)"));
                });

            // Triggering reflow
            match self.reflow_target.get() {
                Some(elem) => {
                    elem.offset_width();
                }
                None => return Err(FlipError::GetReflowTargetFromNodeRefError),
            }

            flip_final_state.into_iter().for_each(|(_, td)| {
                td.as_ref()
                    .unwrap()
                    .node_ref()
                    .get()
                    .unwrap()
                    .clone()
                    .style("transition", "transform 0.6s");

                td.as_ref()
                    .unwrap()
                    .node_ref()
                    .get()
                    .unwrap()
                    .clone()
                    .style("transform", "");

                set_timeout(
                    move || {
                        td.as_ref()
                            .unwrap()
                            .node_ref()
                            .get()
                            .unwrap()
                            .clone()
                            .style("transition", "");
                    },
                    Duration::from_millis(600),
                );
            });

            Ok(())
        }
    }
}

Which results in this:

crossfade_example.webm

What it does is take all the node_refs that require moving and animates them with FLIP, as @diversable pointed out.

I'm new to open-source in general, but, once things are cleaned up, I wonder if this is worth a crate. Would it be overkill?

Many thanks!

[diversable]

This is great work @GabrielBarbosaGV!!!

I for one would appreciate it if you turned this into a crate - perhaps if you named it something like Leptos-Animations it would encourage others to contribute more pre-made animation tools to it, similar to how Svelte includes animation tools in its core library...

[GabrielBarbosaGV]

Thanks, @diversable!

Now that you mention it, I see there already is a crate named leptos_animation - I will open a discussion there to see if a change such as this suits the library, and, if so, open a PR.