search

halogenandtoast / ArkhamHorror

An unofficial rules-compliant browser based version of Arkham Horror: The Card Game. Not produced, endorsed, or supported by, or affiliated with Fantasy Flight Games.
https://arkhamhorror.app
110 stars 35 forks source link

feature: Animations #444

Open airfortech opened 2 weeks ago

airfortech commented 2 weeks ago

Would be nice to have animations when drawing cards, puting on table, moving characters, etc. for better clarity what is happening on tabletop. Do you have it in plans to develop?

halogenandtoast commented 2 weeks ago

I do, and in fact cards played from your hand should already animate. but...

Recently I became aware of the view-transitions-api which might give me a lot of other animations for free but I'm waiting for better browser support before I invest into it fully.

airfortech commented 2 weeks ago

nice to hear. Hope faster than later :) Sounds would also be welcome.

halogenandtoast commented 2 weeks ago

Hope faster than later :)

I am trying to extend (and fix) things as fast as I can, but I'm just one person with a job and a family so I can't make any promises on the speed at which things happen. Animations in CSS aren't the easiest (at least until the view-transitions-api comes out, but I also had a lot of issues with it so there are a bunch of things I'd still need to do).

For instance just to animate from your hand to the table I need to figure out the correct bounding boxes, fade in and out at the same time animating a clone of the element between components using gsap (I think I can actually do this without cloning), but it's still a lot to setup and get animating well.

Animating players moving between locations should be easier because that's all within the same component.

airfortech commented 2 weeks ago

no problem, app is awsome anyway. I see you are using vue for frontend. I know only react animation libraries like framer-motion so cant help much.