Leveraging JS from Yew to animate component #2136

Roms1383 · 2021-11-11T10:19:08Z

Roms1383
Nov 11, 2021

Ok so here is a quick and dirty sample on how to leverage JS to animate your component.

in your index.html, drop-in your favorite animation JS lib

in my example I use GSAP

<!DOCTYPE html>
<html>
   <head>
      <!-- ... -->
   </head>
   <body>
     <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" /><!-- here, at the end -->
   </body>
</html>

your component:

pub struct Props {
    #[prop_or_default]
    pub title: String,
}
pub struct Weapons {
    props: Props,
    link: ComponentLink<Self>,
    animation: Option<Animate>,
}

// some wasm-bindgen magic ...
// allows to create a JS class and call its method from Rust
#[wasm_bindgen(module = "/src/animations.js")]
extern "C" {
    type Animate;

    #[wasm_bindgen(constructor)]
    fn new(id: String) -> Animate;

    #[wasm_bindgen(method)]
    fn enter(this: &Animate);
    #[wasm_bindgen(method)]
    fn leave(this: &Animate);
    #[wasm_bindgen(method)]
    fn destroy(this: &Animate);
}

in JS:

      // src/animations.js
      export class Animate {
        constructor(id) {
            this._id = id
            this._tween = TweenMax.to(`#${id}`, .3, { css:{ "filter": "drop-shadow(0 0 0.75rem black)"} })
            this._tween.pause()
        }
      
        enter() {
            console.log("on mouse enter")
            this._tween.play()
        }
      
        leave() {
            console.log("on mouse leave")
            this._tween.reverse()
        }
      
        destroy() {
          gsap.killTweensOf(`#${this._id}`)
          this._id = undefined
          this._tween = undefined
        }
      }

back to your component to implement Component trait and drive JS animation from Rust:

impl Component for Weapons {
    type Message = Msg;
    type Properties = Props;

    fn create(props: Self::Properties, link: yew::ComponentLink<Self>) -> Self {
        Self {
            link,
            props,
            animation: None,
        }
    }

    fn update(&mut self, msg: Self::Message) -> yew::ShouldRender {
        match msg {
            Msg::OnMouseEnter => {
                // here this is a ugly trick because when calling fn create(...) the button is not yet available in the DOM
                if self.animation.is_none() {
                    self.animation = Some(Animate::new(String::from("fetch-button"))); // please mind the id here
                }
                self.animation.as_ref().unwrap().enter();
                true
            }
            Msg::OnMouseLeave => {
                self.animation.as_ref().unwrap().leave();
                true
            }
        }
    }

   // ...

    fn view(&self) -> yew::Html {
        let onmouseenter = self.link.callback(|_| Msg::OnMouseEnter);
        let onmouseleave = self.link.callback(|_| Msg::OnMouseLeave);
        html! {
          <button
            id="fetch-button" // please mind the id here
            onmouseenter=onmouseenter
            onmouseleave=onmouseleave>{ self.props.title.clone() }</button>
        }
    }
}

please also note that if in fn view(...) you conditionally returns different html, then you will need to manually clean your references on JS side: once again, you can expose the appropriate JS method from Rust e.g. :
```
export class Animate {
  // ...
  
  // just add this new method, expose it with `wasm-bindgen` and call it from Rust
  destroy() {
    gsap.killTweensOf(`#${this._id}`)
    this._id = undefined
    this._tween = undefined
  }
}
```
if you don't, animation will work the first time, but then when you will switch your display in view, the next time you will display your button it won't animate anymore, whereas if you correctly handle your JS references and recreate them, everything is just fine.

Here's a small video:

js-rust-animations.mov

Have fun 🎉

Roms1383 · 2021-11-11T10:23:22Z

Roms1383
Nov 11, 2021
Author

I forgot to mention, here's my Cargo:

# ...

[dependencies]
anyhow = "1"
console_error_panic_hook = "0.1.6"
wasm-bindgen = "=0.2.74"
wee_alloc = "0.4.5"
ybc = "0.2"
yew = "0.18"

0 replies

Roms1383 · 2021-11-11T11:57:25Z

Roms1383
Nov 11, 2021
Author

So I made another @voidpumpkin, by creating a separate Component, e.g. :

src/button.rs

use yew::{html, Callback, Component, ComponentLink, MouseEvent, Properties};

use wasm_bindgen::prelude::*;

#[derive(Debug, Properties, Clone, PartialEq)]
pub struct Props {
    pub id: String,
    #[prop_or_default]
    pub label: String,
    #[prop_or_default]
    pub callback: Callback<MouseEvent>,
}

pub struct Button {
    props: Props,
    link: ComponentLink<Self>,
    animation: Option<Animate>,
}

pub enum Msg {
    OnMouseEnter,
    OnMouseLeave,
}

impl Component for Button {
    type Message = Msg;

    type Properties = Props;

    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
        Self {
            props,
            link,
            animation: None,
        }
    }

    fn update(&mut self, msg: Self::Message) -> yew::ShouldRender {
        match msg {
            Msg::OnMouseEnter => {
                if self.animation.is_none() {
                    self.animation = Some(Animate::new(String::from("fetch-button")));
                }
                self.animation.as_ref().unwrap().enter();
                true
            }
            Msg::OnMouseLeave => {
                self.animation.as_ref().unwrap().leave();
                true
            }
        }
    }

    fn change(&mut self, props: Self::Properties) -> yew::ShouldRender {
        if self.props != props {
            self.props = props;
            true
        } else {
            false
        }
    }

    fn view(&self) -> yew::Html {
        let onclick = &self.props.callback;
        let onmouseenter = self.link.callback(|_| Msg::OnMouseEnter);
        let onmouseleave = self.link.callback(|_| Msg::OnMouseLeave);
        html! {
          <button
            id={self.props.id.clone()}
            onclick=onclick
            onmouseenter=onmouseenter
            onmouseleave=onmouseleave>{ &self.props.label }</button>
        }
    }

    fn destroy(&mut self) {
        js_log("on destroy".into());
        self.animation.as_ref().unwrap().destroy();
        self.animation = None;
    }
}

#[wasm_bindgen(module = "/src/animations.js")]
extern "C" {
    type Animate;

    #[wasm_bindgen(constructor)]
    fn new(id: String) -> Animate;

    #[wasm_bindgen(method)]
    fn enter(this: &Animate);
    #[wasm_bindgen(method)]
    fn leave(this: &Animate);
    #[wasm_bindgen(method)]
    fn destroy(this: &Animate);
}

impl std::fmt::Debug for Animate {
    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
        f.debug_struct("Animate").field("obj", &self.obj).finish()
    }
}

#[wasm_bindgen(inline_js = "export function js_log(message) { console.log(message); }")]
extern "C" {
    fn js_log(message: String);
}

src/animations.js

export class Animate {
  constructor(id) {
      this._id = id
      this._tween = TweenMax.to(`#${id}`, .3, { css:{ "filter": "drop-shadow(0 0 0.75rem black)"} })
      this._tween.pause()
  }

  enter() {
      console.log("on mouse enter")
      this._tween.play()
  }

  leave() {
      console.log("on mouse leave")
      this._tween.reverse()
  }

  destroy() {
    console.log("on JS destroy")
    gsap.killTweensOf(`#${this._id}`)
    this._tween = undefined
    this._id = undefined
  }
}

and then use it somewhere in the code, e.g.:

impl Component for Widget {
  // ...
  fn view(&self) -> yew::Html {
          let onclick = self.link.callback(|_| Msg::List);
          html! {
            <super::button::Button
              id="fetch-button"
              callback=onclick
              label={self.props.title.clone()}
            />
       }
   }
}

0 replies

Roms1383 · 2021-11-11T12:04:14Z

Roms1383
Nov 11, 2021
Author

If somebody know how to track potential memory leaks in Chrome developer tool, I'd interested to try.

0 replies

Roms1383 · 2021-11-11T12:40:44Z

Roms1383
Nov 11, 2021
Author

Alright there's actually no need for a trick in update:

if self.animation.is_none() {
    self.animation = Some(Animate::new(String::from("fetch-button")));
}

this can be removed

I'm very new to Yew so what I should have done is:

fn rendered(&mut self, first_render: bool) {
  if first_render {
        self.animation = Some(Animate::new(self.props.id.clone()));
    }
}

👌

0 replies

probyukCSS · 2021-11-21T04:14:19Z

probyukCSS
Nov 21, 2021

pog bro thx sm

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Leveraging JS from Yew to animate component #2136

{{title}}

Replies: 5 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Leveraging JS from Yew to animate component #2136

Roms1383 Nov 11, 2021

Replies: 5 comments

Roms1383 Nov 11, 2021 Author

Roms1383 Nov 11, 2021 Author

Roms1383 Nov 11, 2021 Author

Roms1383 Nov 11, 2021 Author

probyukCSS Nov 21, 2021

Roms1383
Nov 11, 2021

Roms1383
Nov 11, 2021
Author

Roms1383
Nov 11, 2021
Author

Roms1383
Nov 11, 2021
Author

Roms1383
Nov 11, 2021
Author

probyukCSS
Nov 21, 2021