Expand animation broken in card-expand.html

[tintindas]

Hi @ECorreia45 ,

The expand animation of the card-expand example is broken. It just jumps to the completed state instead of doing a smooth transition.

The close animation however works perfectly fine.

P.S.- Great youtube channel. Keep up the good work.

[ECorreia45]

Thanks for this. I will take a look at this. Can you tell me which browser you tried this on? And the version too please :)

[tintindas]

Mozilla Firefox
Version: 83.0 (64bit)
OS: Ubuntu 20.04.1 LTS

Demo

[ECorreia45]

Thank you. Really appreciate the video.

[tintindas]

Thanks!

So, I tested it out some more and turns out it's a problem with Firefox.
Works perfectly with browsers built on chromium.
I think it might be a case of how Firefox applies default styles.

[ECorreia45]

Interesting. I was not able to reproduce it. Will investigate based on your findings.

[ECorreia45]

I updated the code according to some tests I did on firefox.

I put the fixed commented out that you can try. I also used a much better and simpler solution

const toggleExpansion = (element, to, duration = 350) => {
  return new Promise((res) => {
    element.animate([
      {
        top: to.top,
        left: to.left,
        width: to.width,
        height: to.height
      }
    ], {duration, fill: 'forwards', ease: 'ease-in'})
    setTimeout(res, duration);
  })
}

let me know what you think

[tintindas]

Works great on my device too!!

The new solution is much more elegant ❤️
This is some really great work.
Thank you!

[ECorreia45]

Thank you :). Fun stuff