There seem to some plugins and scripts that attempt to provide a marquee type effect for text. (e.g. Jquery marquee). These seem to work OK in high end Computers but they seem to drop frames when viewed in low end machines like mobiles, tablets or even STBs (Set Up Box).
As a result of Frame Dropping or dropped/laggy Frames Times there are 'jumps' in the effect. Such 'jumps' are not present in marquee type effects in native apps.
I'm on a quest to build a high-end marquee component for a STB environment as part of my current job and wanted to try multiple options to get a marquee scrolling effect and provide an little (or no) dropped/laggy Frames. The end result would be the scrolling effect running at a consistent 60FPS.
My current work can be seen by loading the index.html page in a browser. (The Game of Thrones BG is to provide a simulation of a STB environment and to test the readability of scrolling text against a picture BG)
###There are 4 technique I'm testing:
- Manual JavaScript animation using setInterval (Animate with SetInterval)
- Manual JavaScript animation using RequestAnimationFrame (Animate with RequestAnimationFrame)
- CSS3 Transition based animation on the left property (Animate with CSS3 Transition on 'left')
- Hardware Accelerated CSS3 Transition based animation on the translate3d property (Animate with CSS3 Transition on 'translate3d')
###Hardcoded Values
- You cant change the scrolling text right now. The div is hardcoded to 550px for the sake of simplicity in calculations
- All effects are set to end in 10s (i.e. it should take 10s for the text to scroll from visibility to end)
###How to test
- Just click on the links on the top of the page to swap the techniques and see them work
- Click on 'Stop & Reset' to reset to initial state
- View your console for timing information
- Use your Dev tools Timeline to see Frame rates etc
###Observations so far
- All the techniques produce 60FPS (close to or exactly 16.66ms a frame) but there are some frames that take a longer time which cause some 'jumps' in the effect. I cant seem to work out why these frames are taking longer as they don’t seen to coincide with the usual suspects like Garbage Collection, reflow etc.
- The translate3d technique seems to be the best as it has the lowest standard deviation in 60FPS and little to no 'idle' spikes in certain frames that spike.
###Discoveries so far
- If you want to force Hardware Acceleration using translate3d (a common technique) make sure you don't give it explicit positioning properties as well. e.g. when doing translate3d(1px,0,0) where you are 'moving' it on the X axis make sure you also don't have a 'left' property set on the element (i.e. left:10px;). In this case, hardware accelerated is NOT enforced.