Board Game Arena

Hi,

have you tried to use CSS3 animate in BGA dev instead of using Dojo slideToObject or other ?

best regards

bidulpik wrote: ↑23 January 2022, 15:19 Hi,

have you tried to use CSS3 animate in BGA dev instead of using Dojo slideToObject or other ?

best regards

Yep, some devs are using css animations for sliding.

There difficulties with the fact that normally if you using css and modern layouts your div are not having absolute positioning
and therefore cannot be animated
There are some js fiddles here - but its quite complex


Phantom object move on oversurface https://codepen.io/VictoriaLa/pen/gORvdJo This technique creates clone of the object it moves it on another surface. It works well even when parents have css transforms applied such as scale and rotate

Move object directly using positioning https://codepen.io/VictoriaLa/pen/dyzgKVX This technique is modification of BGA framework method to allow mobile object not to have absolute position before or after the move (and uses css animation not dojo). Methods slideToObjectRelative, attachToNewObjectNoDestroy

Both example above are 100% Vanilla JS - free of dojo or any other libs.

It is completely OK to use standard JS / CSS features and skip dojo, but please avoid using third party libraries. BGA is not open source and non-commercial so some standard licenses are not OK for using on BGA.

On the other hand, slide animations are not that bad for animating elements on typical BGA and I still use it even in tandem with other CSS animations. I even chained some dojo animations together with CSS animation using dojo.fx.chain. Animations are sometimes tricky to do declaratively and imperative style works better.

Thanks for your answer.