Animation stutter

[zoneblaze]

I've set up a simple animation test for a ticker type animation for a desktop set up, basically a couple of surface divs going right to left and seems to stutter quite a bit. Seems more pronounced in Chrome than other browsers. Not sure if that is how good it gets at the moment or am I missing something? You can check out my test example here: http://zonkzone.net/fatest/

[zackbrown]

Hey @zoneblaze — your example is performing well for me. See screen grab with Chrome's FPS meter:

The first thought I would have, which I've run into this several times: if you're using a Retina MBP without a dedicated GPU and you've turned off scaling (i.e. are using a higher effective resolution than Retina,) the hardware isn't powerful enough to drive 60FPS animations. This is probably similarly the case for any other manufacturer that offers a HiDPI screen but underpowered hardware to back it.

Another possible slow-down is the Chrome Inspector itself—when it's open and when you're inspecting DOM elements, it can drop performance significantly.

Do either of these sound like they describe your situation? If not, is there some code you can share so I can look for any possible code-related issues?

[zoneblaze]

Thanks for the tips, I guess must be something to do with my computer (powerful mac though), tried it out on other computers and seems fine. I was just thinking it seems odd I am getting stutters on such a simple tween whilst I can see those period tables examples playing out so smooth. My basic code is here, in terms of performance, would it make more sense to place vanilla divs in a single fa-surface with the header/bodycopy/image layout with just one modifier to animate or is it fine as my example set up with a famous surface/modifier for each bit of content? I noticed the way I have set it up, it keeps updating the x positions on the header, copy, image and background modifiers to move the content across, not sure if this is the optimal way to set up for max performance.

<fa-modifier fa-translate="[bubbleAnimate.xPos.get(),30,0]" >

    <!-- START: Speechbubble View -->

    <fa-modifier fa-translate="[0,0,0]" fa-size="[100, 100]"> <!-- speech bubble modifier -->

        <!-- START: background -->
        <fa-surface fa-background-color="'orange'"></fa-surface>
        <!-- END: background -->

        <!-- START: headers -->
        <fa-modifier fa-translate="[0, 0, 0]">
            <fa-surface>hello</fa-surface>
        </fa-modifier>
        <!-- END: headers -->

        <!-- START: copy -->
        <fa-modifier fa-translate="[0, 40, 0]">
            <fa-surface>test ticker</fa-surface>
        </fa-modifier>
        <!-- END: copy -->

        <!-- START: image -->
        <fa-modifier fa-translate="[110, 0, 0]">
            <fa-image-surface fa-image-url="https://pbs.twimg.com/profile_images/499464864595574784/W_V1Kbha.jpeg"></fa-image-surface>
        </fa-modifier>
        <!-- END: image -->

    </fa-modifier>

    <!-- END: Speechbubble View -->

</fa-modifier>

[zackbrown]

Your code snippet looks good: behind the scenes, Famo.us will update every single div with its composited Matrix3d values on every tick, so that behavior that you describe with each of the divs getting updated is expected. You're authoring it efficiently by grouping your image, copy, headers and bg inside of a single modifier which you're then translating.

That said: you really should not be running into a performance wall, even if you were handling this animation with four independently translated modifiers + surfaces. You should be able to get into the hundreds. Have you tried lowering your resolution? Restarting Chrome? Restarting your computer? It could also be useful to dig into the Chrome profiler and to see what's running hot.

[zackbrown]

@zoneblaze I will go ahead and close this unless you have any further updates.