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

    Choppy Animation – difference between Publish and Project folder

    bartekgru

      Hi,

       

      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.

       

      Bart