8 Replies Latest reply on Dec 2, 2015 9:20 AM by _lechleitner

    How can i control gif animations?

    Taferunde

      I have a project in which i need some animations. The animations all have been created in After Effects. Now I can use the png sequences, but these are very big and i need a lot animations running on the same time. So i would rather use the gif animations. So my question: I can control when to play the gif animation but i can't play it more than one time. Is there a solution?

       

      Thanks for answering!

       

      Jannis

        • 1. Re: How can i control gif animations?
          jbowden Adobe Employee

          How are you controlling when it plays?

          • 2. Re: How can i control gif animations?
            Taferunde Level 1

            Crate a marker and when you jump to this set a keyframe "css:display" to "on" or "block". The gif animation will play. But if I jump there one more time it won't play anymore, thats my problem.

            • 3. Re: How can i control gif animations?
              jbowden Adobe Employee

              Hi there,

               

              I see...you're controlling when it displays. Technically, that's not the same as controlling the animated GIF; you're just controlling when you see it. EA recognizes GIF only as an image format, and can't make the browser play from the beginning other than the first time it's displayed or when it loops back (if your animated GIF loops).

               

              However, you could do something similar with an extra image file or two, jQuery, and css background-image to "load" the GIF file into a transparent image. Here's a link to an example that always runs the animated GIF from the beginning:

               

              https://creative.adobe.com/share/52f15194-875b-4604-8857-9b9bf5f78e04

               

              A single line of code that does the work is in the playBtn click handler.

               

              hth,

              Joe

              • 4. Re: How can i control gif animations?
                Taferunde Level 1

                Hi

                 

                Thanks for this

                 

                But i can't play that gif multiple times, i would have to reload the whole page each time as i play one animation. Can i do a controlled loop?

                 

                Thanks for answers!

                • 5. Re: How can i control gif animations?
                  jbowden Adobe Employee


                  Taferunde wrote:

                   

                  But i can't play that gif multiple times, i would have to reload the whole page each time as i play one animation.

                   

                  Sorry, but I don't understand what you're saying here...you can play my example file multiple times without reloading the entire page. Just click the button each time, and it loads the GIF file again.

                   

                  My example GIF file doesn't loop, but you can set a GIF to loop infinitely, or up to 255 times in a GIF editor. But Edge Animate is not a GIF editor. You could re-author your GIF to loop in AE, or edit the GIF in Photoshop or Fireworks or other GIF editors - (search online), though - and then use a similar technique to what I showed in my example file.

                   

                  I hope this helps,

                  Joe

                  • 6. Re: How can i control gif animations?
                    Taferunde Level 1

                    Sorry that's my fault, first time i couldn't play it multiple times but no it works fine

                     

                    Thank you very much!

                    • 7. Re: How can i control gif animations?
                      jbowden Adobe Employee

                      The old link expired, but it turns out the code in the old example also no longer worked. Not sure if this is an issue with the latest version Edge Animate or just the change in browsers over the past two years.

                       

                      Anyway, I've just posted a new link to an example file that works in Edge Animate CC 2015 - get the latest here:

                       

                      http://adobe.ly/1lgela6

                       

                      The example uses a bit of trickery to make it appear like a GIF is being "started" - it's done with a transparent image, a still of the first frame of a GIF under it, and the animated GIF, which is loaded in the transparent element via jQuery.

                       

                      Here's the relevant code in the click handler for the playBtn element:

                      sym.$("transparent").css("background-image", "url('images/gimme-skin-kitty-still.gif')");

                      sym.$("transparent").css("background-image", "url('images/gimme-skin-kitty-no-loop.gif')");

                      • 8. Re: How can i control gif animations?
                        _lechleitner

                        Hi, I need a more detailed description for this method please. I just made a thread for that: Replay GIF with loop

                         

                        Hope you can help me!

                         

                        cheers,
                        Stefan