I am currently developing a presentation library to simplify my work. Naturally, animations play a significant role in this project.
The library leverages Transit for smooth CSS3 animations. One specific animation involves an element sliding into or out of the presentation. When two of these animations are combined (one entering, one exiting), it creates a visually appealing slide transition effect. You can view a demo here (use arrow keys or click to navigate through the presentation).
While Chrome displays the effect seamlessly without a noticeable gap between the slides, it distorts text during transitions. Therefore, I am considering using Firefox or IE for actual presentations as they anti-alias text nicely. However, both Firefox and IE introduce a gap between the slides as if they were slightly out of sync.
Upon logging the start times using Date.now() for each animation, there was a small time difference between Chrome (4ms) and Firefox (3ms). Although some overhead can be attributed to creating the Date object, optimization is still ongoing. Despite Chrome showing a larger time gap, it is Firefox that exhibits the animation gap.
Is there a solution to this issue? Could it be related to my implementation (available on Github), or is it a Transit-related problem (repository on Github)? If no straightforward solution exists, I could consider using Tram.js, although I prefer to stick with Transit initially despite its slight clunkiness.
Any insights into this matter would be greatly appreciated. I have refrained from sharing specific code on this page as the issue could stem from various sources, hence displaying the entire library for reference.