Item9499: TwistyPlugin animations aren't smooth

Priority: Normal
Current State: Closed
Released In: 1.1.0
Target Release: minor
Applies To: Extension
Component: TwistyPlugin
Branches:
Reported By: PaulHarvey
Waiting For:
Last Change By: ArthurClemens
Somehow the size of the twisty is miscalculated for the transition. I went through a similar problem with JQuerySuperfish, and fixing it was difficult - it had something to do with unreliable measurement of elements that are display: none; which is what we have now to fix Item9422.

-- PaulHarvey - 19 Aug 2010

For reference, I think my superfish application ended up setting a parent/containing element to be display:none, and then the item of interest could be measured properly with .width/.height

-- PaulHarvey - 19 Aug 2010

I do want to have animations back.

The hop at the end is because consecutive margins are combined at the end of the animation. A known problem that very much depends on the surrounding markup.

This can be fixed by making sure that the contained twisty content does not come with a bottom margin. Reverting last change.

-- MichaelDaum - 19 Aug 2010

How does normal people using twisties in topics ensure this?

This is bullshit. I have a plain topic with a plain twisty and no control over margins/heights anything. Just a simple twisty that opens and closes some text.

And it animates like shit. It looks bad. It is much better that is just plain and simple opens and closes. I bet a PC with a very fast CPU may make it look smooth but on my machine the twisty animation is few discrete jumps and it just looks like a page made by a scriptkid.

That fix Paul did was correct and should not be reverted unless the animation is fixed so it looks properly.

We are at least 3 that say it looks like shit. Paul, Arthur and myself.

I am re-applying the fix.

I tested the amination on a gamer spec type machine and there the animation is acceptable. But it looks like shit on the machines most of us have which are laptops where battery life is priotized higher than getting more frames per second in Quake.

Unless the animation feature can be implemented in a way that also works on normal PC's we are better off with no animation.

It has nothing to with margins. It is simply a matter of machines not being fast enough to render the opening smoothly.

-- KennethLavrsen - 19 Aug 2010

Re-applied after having aligned pattern css in Item9500.

-- ArthurClemens - 19 Aug 2010

And still looking bad.

Reopening

-- KennethLavrsen - 19 Aug 2010

Confirmed. Disabled again until a fix comes along.

-- ArthurClemens - 19 Aug 2010

This deserves to be configurable. Skin/Wiki-app authors can make good use of animated twisties if they are careful. We shouldn't cripple that for everybody. Working on it.

-- PaulHarvey - 20 Aug 2010

Making it configurable hides the bug that needs a fix. In other words, once configurable we are still stuck with the jumping animation.

-- ArthurClemens - 20 Aug 2010

I agree, but it's worth noting that it is extremely frustrating being on a PC that spends several seconds animating a 'fast' transition. Something that I experienced on a 3.0GHz Xeon when I was using nv instead of commercial nvidia drivers, making NatEdit painful when switching tabs. It can't hurt to make this configurable

-- PaulHarvey - 20 Aug 2010

Explanation of the jump problem: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ (also includes a fix, but it is hard to integrate this into the code).

-- ArthurClemens - 20 Aug 2010

With the changes to Item9515 the animations perform much better. Please give it another try.

-- ArthurClemens - 09 Sep 2010

I done a lot of trial and error on the code to get the animations smooth. It now works, except when the twisty content block has a container with bottom margins - you will still see a jump.

By changing the TWISTY code slightly this can be overcome.
Instead of writing:
%TWISTY{}%
<div class="foswikiHelp">
inside the twistie
</div>
%ENDTWISTY%
write:
%TWISTY{class="foswikiHelp"}%
inside the twistie
%ENDTWISTY%

However in most cases the twisties now just work smoothly.

-- ArthurClemens - 10 Sep 2010

As you removed the default CSS class foswikiMakeHidden, I had to fix the corresponding unit tests. I hope I got this right Arthur...

-- OlivierRaginel - 12 Sep 2010

Thanks for cleaning up after me.

-- ArthurClemens - 12 Sep 2010
 
Topic revision: r36 - 12 Sep 2010, ArthurClemens
 
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. see CopyrightStatement. Creative Commons License