4 Replies Latest reply on Nov 12, 2012 3:09 AM by bartekgru

    Choppy Animation – difference between Publish and Project folder




      I am sure, that this problem bothers many.



      I wanted to animate PNG-pictures slowly on the x-axis (2px to the right, 2px to the left. Duration: 2seconds).


      The Problem: The animation looks choppy. The PNG always jumps one whole pixel. There is no anti-alias during the animation.


      Workaround: I rotated the picture 1°. This forces to anti-alias the PNG. Now the animation looks fluid. This works in webkit-browsers (Chrome) as well in Firefox.


      Watch http://grudziecki.com/c/edgeAnimate/project/

      (note: The workaround is not needed for simple rectangle-boxes in webkit-browsers)



      The big Problem: Now I published the project. While it still works in Firefox, the animation looks choppy again in webkit-browsers.


      Watch http://grudziecki.com/c/edgeAnimate/publish/

      (note: Even the rectangle-box animates choppy in webkit-browsers)



      Now I started wondering: I compared how the divs are animated. The animation is made using the 'transform'-method in the project-version while the 'left' value of the div is changing in the publish-version. But this doesn't seem to be the problem, as Firefox is rendering both project and publish-versions properly.


      Check the comparison: http://grudziecki.com/c/edgeAnimate/choppy-fluid-anim.png




      My Question 1: What are the differences between the project and publish-versions except static html and obfuscated javascript? Can I upload the project-version as this works fine in Firefox and webkit-browsers on both Mac and Pc?


      My Question 2: How should I animate slow and minor motions so that they are rendered fluidly in the publish-version in webkit-browsers?



      Thank you for the help. I'm sure, that this bothers many designers.