layer jerking when tweening scale

jeromebg · February 8, 2024 at 11:22 AM

Hi,
I have a layer type container which I tween scale and alpha for pulse effect.
The position of the layer, parent to a hotspot, is jerking when I tween it's scale and alpha...
Any solution ?

barebone : https://360images.fr/barebone_pulse/

Code

<style name="callout_pulse" type="container" align="center" bg="false" width="10" height="10" bgborder="3 0xffffff 1" onloaded="pulse(get(name))"/>
<action name="pulse" protect="true">
tween(layer[%1].scale|layer[%1].alpha,3|0.0,2,,set(layer[%1].scale,1);set(layer[%1].alpha,1);pulse(%1));
</action>

Tuur · February 8, 2024 at 12:09 PM

Hi,

did you try it like:

Code

    <action name="DoAni" protect="true">
       callwith(hotspot[%1], 
           tween(width|height|bgroundedge|alpha, 40|40|21|0,1.7,,
               assignstyle(hotspot[%1], 'pulse');DoAni(%1);
           );
       );
   </action>

works perfect for me... although it's not a layer..

Tuur

klaus.krpano · February 8, 2024 at 1:05 PM Official Post

Hi,

I don’t see a jerking yet, but maybe try disabling the pixelgrid fitting:

krpano.com - Documentation - XML Reference

Best regards,

Klaus

jeromebg · February 8, 2024 at 2:16 PM

Thanks for your answer.
I tried with gridfit="false" with same result.

https://360images.fr/barebone_pulse/ice_video_20240208-141222.webm

The circle "floats" around the hotspot like if it was not keeping it's position

jeromebg · February 8, 2024 at 2:20 PM

Quote from Tuur

works perfect for me... although it's not a layer..

might be the reason ;)

Tuur · February 8, 2024 at 3:18 PM

This seems to work quite nice, but perhas better to do it in js.

Code

    <action name="pulse" protect="true">
       callwith(layer[%1], 
           tween(width|height|alpha, 20|20|0,2,,
               assignstyle(layer[%1], 'pulse');
                pulse(%1);
                , makeborderwidth(%1,*width);
           );
       );
   </action>
    <action name="makeborderwidth">
        val = %2;
        roundval(val);
        calc(layer[%1].bgborder,  val/2 + ' 0xffffff 1');
    </action>

Display More

I made a compare example here:
https://www.virtualtuur.com/krpano/121/bar…se/1/index.html

I actually think the scale being un-even/odd the half of the time-ish might be the problem.

On my screen the green pulse is super smooth, but it is not the best solution obviously.. works like a charm though... on a mac.. i understand on pc /chrome it is the same stutter.. .

Tuur

klaus.krpano · February 8, 2024 at 4:17 PM Official Post

Hi,

okay, know I see what you mean (I was looking at the callout elements and didn't notice the circles).

That's a known 'problem' - as related to changes between 1.20 and 1.21.

Before 1.21 layers that meet certain criteria (e.g. no children layers) where scaled using CSS transforms. But this had caused serval problems and different behaviors across browsers. Some browsers were scaling the element nicely, some convert the layer into pixels and then just scale that (that means the element becomes pixelated when scaled). And it was not possible to control several aspects (e.g. like the pixel-grid-fitting).

With 1.21 the scaling is now directly applied to all layer settings - to the size, the position and so on - and in this case also the border-widths - and here is also problem - fractional sizes and positions are partially already possible (depending on the browser), but the border-width is currently not rendered and positioned with fractional accuracy by the browsers.

For the most cases, the new method should be better and for such animated cases, it's indeed a problem...

Therefore I'm already considering adding an option to especially enable the scaling by CSS transforms for such case (maybe even automatic somehow...).

Best regards,
Klaus

jeromebg · February 8, 2024 at 4:28 PM

OK thank you for your reply, I'm going to look into a css solution then

klaus.krpano · February 8, 2024 at 5:51 PM Official Post

Using two hotspots might be also an option...

That would also allow smooth animations and it would allow VR support.

Tuur · February 8, 2024 at 6:03 PM

.. yes i was also wondering why he uses a layer .. i think to remember in the past it was 2 hotspots..

Tuur

layer jerking when tweening scale

Participate now!

Similar Threads

krpano 1.21