3 Replies Latest reply on Oct 1, 2012 12:23 PM by wbaafs

    Performance Question




      We're new to doing web aninmations with Edge Animate and have sone questions.


      We notice that even with simple animations playback in Edge Animate and in various browsers seems slow and jerky, with or without easing.

      This is disappointing since we're using a Dell XPS 8300 w/ Sandy Bridge i7 @ 3.4 GHz and a Radeon HD5770 card.


      So here are the questions:


      1) What example sites can you suggest that exhibit typical Edge Animate performance?  High performance?
      2) Is Adobe expected to do anything to dramatically improve performance?

      3) Is there something we can configure for better performance?

      4) Does anyone feel that this level of performance actually detracts from a site?

      5) What alternatives are there in the marketplace that are HTML-standards based?



        • 1. Re: Performance Question
          wbaafs Level 1

          Forgot to ask:

          6) We're using png content instead of svg content as suggested in Adon'e TV's training video to avoid browser compatibility issues.  Are animations with SVG instead of PNG conttent noticeably faster/smoother?


          • 2. Re: Performance Question
            jhatwich Adobe Employee

            Hi wbaafs,


            Thanks for your interest in Edge Animate!  I can assure you that performance optimization is a high-priority for the Animate team.  We have done a lot of work to tweak performance in the Animate runtime and that work continues.


            Each browser has a different performance profile.  Animate triggers GPU acceleration in the browser when possible to optimize for performance and can produce animations that work as well or better than other animation available in HTML.  Some browsers have severe bugs that occur only when using GPU acceleration and we made a decision to disable it where it causes things like leaving trails/tracks behind elements when they move across the screen.  Ultimiately, the browser you are using is as or more important than the horsepower of the machine.


            As browsers evolve we can gradually increase the complexity of HTML animations, but it is always a balance between creative vision and what the target browsers are capable of delivering.  I'm not seeing performance problems with the animation on the Edge Animate homepage.


            Without seeing the problematic composition I can only speak in general terms.  One of the primary reasons for bad playback performance is the use of large images.  Moving large images can cause performance problems whether they are SVG or PNG (I don't think image format affects playback performance).  On devices, playback performance is strongly linked to the number of pixels moving on the screen.  You might try a relatively simple animation to try to determine what is causing performance to become unacceptable.


            More specifics about the browsers and the content you are testing would help us better understand and address the issue.  I'd be grateful if you would share a link to the content (private message me if you don't want the link to be public) and let us know what browser is exhibiting poor performance.


            - Josh

            • 3. Re: Performance Question
              wbaafs Level 1

              Thanks Josh!


              We're making better progress here today.... and starting to love Edge Animate!


              We're designing our animation to used a phased presentation in which just a few elements are animated at once.  This also lets us be a bit more cinematic with "dramatic pauses" between each phase.  This seems to simplify what's going on onscreen at any point  in time.



              Also we're getting better with the magic pin and thus eliminating butted segments of an individual property's timeline (which cause jerkiness even when the adoining property values are equal, because the rate of change in the segments are usually different).


              We find that in addition to the browser vendor, the level of zoom that the browser is set to can cause problems such as jerkier playback, and in the case of vertical movements of images (e.g., during an Ease Out/EasOutBack), thin horizontal lines are be left behind (current versions of Opera and Chrome).fer t


              We're using PNGs rather than SVGs becaus  we can select and export individual vector-bsaed design elements in Expression Web and export them to png's more rapidly than we can create svg files from Illustrator. 


              I'm hoping that future versions of Edge Animate will support direct import from Illustrator.  I suppose you can't comment on that, but if you can, let us know!!


              Thanks again.