slideTo with css scale transformed elements

[locerol]

Hello!

I am having problems solving how to use slideTo with some css transform items. As explained in the Animations section of the Game_interface_logic:_yourgamename.js document:

Note 2: the slideTo methods are not compatible with CSS transform (scale, zoom, rotate...). If possible, avoid using CSS transform on nodes that are being slided. Eventually, the only possible solution to make these 2 compatible is to disable all CSS transform properties, use slideToObjectPos/placeOnObjectPos, and then apply them again.

So, the problem I am having is using the disable all css transform properties, slidingTo, and then applying them again solution.

This is the code I have. In the first sentence I remove the scale transform I have on all 'onBoard' element. Then I use the slideToAndDestroy function and in the last sentence, I apply the scale transform again. But the slideToAndDestroy does not move the victoryPointToken to the place is supposed to go, there is an offset as if the scale had not been removed.

Code: Select all

  
  		dojo.query('.onBoard').style('transform', "");

                for (i=0;i<notif.args.numVP2Mod;i++)
                {
                    
                    dojo.place( this.format_block( 'jstpl_victoryPointToken', {
                        VPTOKENPLAYERID: notif.args.player_id,
                        VPID:notif.args.tile_id, 
                        INDEX: i
                        } ) , 'tile_'+notif.args.tile_id);

                        var delay= i*100;
                        if (this.player_id!=notif.args.player_id)
                        {
                            this.slideToObjectAndDestroy( 'victoryPointToken_'+notif.args.player_id+'_'+notif.args.tile_id+'_'+i, 					'overall_player_board_'+notif.args.player_id, 1500, delay);
                        }
                        else //if (this.player_id==notif.args.player_id)
                        {
                            this.slideToObjectAndDestroy( 'victoryPointToken_'+notif.args.player_id+'_'+notif.args.tile_id+'_'+i, 'vpPictureContainer', 1500, delay);
                        }
                }

                dojo.query('.onBoard').style('transform', 'scale('+currentZoomFactor+')'); 

I have tried removing the last sentence, which applies the scale transform again, and then the slideToAnddestroy moves the token to the right place. But then I don't have the scale I need on the board.

Could it be that I need to apply the scale transform again after some extra miliseconds, to let the slideTo function more time to calculate properly the div coordinates?

Any help will be greatly appreciated. Thank you in advance!

locerol

[RicardoRix]

I believe that comment is due to this:
https://boardgamearena.com/forum/viewto ... 12&t=14189
it's mainly due to the rotation transformation, it's just the end co-ordinates are not exactly correct.

One thing that has occurred to me recently although I never tried it, is to instead create an array empty 'div' elements that are already in place with the correct co-ordinates, and instead slideToObject to these div's rather than slideToObjectPos.

[Tisaac]

Why not using a container without any transform and slide this one instead ?

[RicardoRix]

what if, as part of the animation you want to rotate the piece 60 degrees say?

[Tisaac]

what if, as part of the animation you want to rotate the piece 60 degrees say?

Well, rotate the div inside at the same time the container is sliding.

[locerol]

I believe that comment is due to this:
https://boardgamearena.com/forum/viewto ... 12&t=14189
it's mainly due to the rotation transformation, it's just the end co-ordinates are not exactly correct.

Yes, I was looking at that post, and reading Dr. Karotte's and sourisdudesert's answer made me believe this solution it was something easy to implement. Unfortunately, it has not been the case so far

And, as far as I can tell, scale transforms also make slideTo functions not work as expected.