2

I am very new to coding, I've barely done anything. But I've been working on a few gifs that I would like to play in sequence over my stream. However, I have no idea how to go about doing this. I've tried various things, but none of it seems to do what I want it to do. Again I have no idea what I'm doing. So I would love all the help I can get in understanding. For instance I have no idea how to use javascript, I've only been dabbling in HTML and CSS (With no success) Well here's my code.

<html>
    <head>
        <meta http-equiv="refresh" content="20">
    </head>
    <style>
    div {
    width: 515px;
    height: 94px;
    background: Transparent;
    animation-duration: 6s;
    }

    #div1 {animation-delay: 6s;}
    #div2 {animation-delay: 12s;}

    <body>
    <div id="div1" src="sample1.gif">
    <div id="div2" src="sample2.gif">
    </body>
</html>

The meta part is so that once all the gifs have played through, it will refresh after an amount of time. I'm very aware all of it could be wrong but basically my goal is. Play 'gif 1' once gif 1 is finished pause for 3 seconds then play 'gif 2', once gif 2 is finished, pause for 3 seconds and play 'gif 3' ect. Once all gifs are played, restart whole sequence after 'x' seconds.

I also want them all to play in the same place. when I tried one possible solution they just ended up playing the gif next to the first one. So essentially, gif 2 will replace gif 1 when it plays.

Any help would be amazing. Thank you.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Lillian Bush
  • 31
  • 2
  • 1
    Does this answer your question? [Can you control GIF animation with Javascript?](https://stackoverflow.com/questions/2385203/can-you-control-gif-animation-with-javascript) – Iłya Bursov Apr 03 '20 at 20:21
  • Having looked through the suggestion, and looking at what the OP is asking for. It's not the same as what I want. I don't want to pause a large animation on specific points. I want to play multiple gifs one after the other with a empty break in between. An example would be twitch social animation pop-ups, in this video it sort of helps. except he physically animates the pop-ups using css. I don't want to do that. I want to use the gifs I have created instead. https://www.youtube.com/watch?v=zAVQ-KyD9mo&feature=youtu.be – Lillian Bush Apr 03 '20 at 20:31
  • library proposed in this question has events which will help you detect when one gif is stopped, so you can put new one on play – Iłya Bursov Apr 03 '20 at 20:32
  • I'm not quite sure I understand. I do appreciate the help, thank you. But as I said, I am completely new to coding, so based on the answers I can see, I dont know how they could help me – Lillian Bush Apr 03 '20 at 20:33
  • this site is not about teaching coding, so your best bet is to learn first – Iłya Bursov Apr 03 '20 at 20:34
  • 1
    I'm not asking to be taught. I'm asking to understand what I'm doing wrong. As far as I'm aware my code should work from what I've learnt. And the best way to learn is to actually ask questions. – Lillian Bush Apr 03 '20 at 20:35
  • animation-delay css attribute do not work with gifs, it is for animatable elements https://www.w3schools.com/cssref/css_animatable.asp – Iłya Bursov Apr 03 '20 at 20:36
  • Thank you. that's actually helpful. Now I know what to look for. – Lillian Bush Apr 03 '20 at 20:40

0 Answers0