# Making a traditional film animation using kirupa's slide show

**URL:** <https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693>\
**Category:** Uncategorized\
**Created:** [February 2, 2024, 4:29pm UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693 "2024-02-02T16:29:34Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 7:43am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/44 "2024-07-28T07:43:03Z")

</div>

```auto
 function stopTimer() {
  // wait 2 seconds before calling goInactive this changes speed of slideshow
  timeoutID = window.clearInterval(goToStartItem, 1);
  //setTimeout(goToNextItem, 2000);
}

```

tried to add this function and call it

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 7:45am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/45 "2024-07-28T07:45:10Z")

</div>

> [@LondonKillsMe](#):
>
> ```auto
> button.addEventListener("click", () => {
> const labels = document.querySelectorAll(".l");
> labels[0].setAttribute("fill", lightsOn ? "white" : "#FFC05B");
> labels[1].setAttribute("fill", lightsOn ? "white" : "#F86285");    
> lightsOn = !lightsOn;
> stopTimer()
> startButton.disabled = false;
> pauseButton.disabled = true;
> playButton.disabled = false;
> });
> });
> 
> ```

… by calling it from this button which is linked to the close button by id l on the svg element closed

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 7:47am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/46 "2024-07-28T07:47:05Z")

</div>

```auto
<div id="Nw46" class="content"><svg xmlns
<path class="l"fill="#FFFFFF" stroke="none" d="
M 40.75 -18.45.
<g id="closed" transform="matrix( 1, 0, 0, 1, 8,196) 
<path id="" class="l" data-pos = "0vh" fill="#000000" stroke="none" d="
M -14.7 -5.35
Q -15.05 -6.35 -16.4 -6.85 -17.8 -7.35 -18.6 -5.75 -19.45 -4.25 -17.7 4.25
L -17.65 5.75
```

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 7:56am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/47 "2024-07-28T07:56:32Z")

</div>

so obviously my links are all a bit messed up because i have been mucking around with the code so much. but i still cant attatch to a item link or frame reference that works I think because the js loop is still active and as i understand it cant have 2 buttons with the same id and function linked in js without crafty code

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 10:37am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/48 "2024-07-28T10:37:14Z")

</div>

```auto
function goToStartItem() {  
   activeLink = [0];
}

```

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 10:38am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/49 "2024-07-28T10:38:53Z")

</div>

so I have created a function go to start item that acts on an element svg button closed to take it to first frame and changes its fill colours by acting on id l of that svg

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 10:39am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/50 "2024-07-28T10:39:16Z")

</div>

```
      <script>
window.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("closed");
  let lightsOn = false;

  button.addEventListener("click", () => {
    const labels = document.querySelectorAll(".l");
    labels[0].setAttribute("fill", lightsOn ? "white" : "#FFC05B");
    labels[1].setAttribute("fill", lightsOn ? "white" : "#F86285");
    
    lightsOn = !lightsOn;
    goToStartItem()

  });
});
</script>

```

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 10:40am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/51 "2024-07-28T10:40:04Z")

</div>

blah dont understand your text editor it’s formatting is illusive or my code is bad, but you get the idea i hope - html  
div id=“Nw46” class=“content”\>\<svg xmlns=“[SVG namespace](http://www.w3.org/2000/svg)” version=“1.1” xmlns:xlink=“[http://www.w3.org/1999/](http://www.w3.org/1999/) id=“closed” blah  
path class=“l"fill=”#FFFFFF” stroke=“none” d=“” blah  
\<path class=“l” data-pos = “0vh” fill=“#000000” stroke=“none” d="/\>blah end of svg

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 10:46am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/52 "2024-07-28T10:46:55Z")

</div>

and this works like the replay button now i have to get it to stop on active link[0] initially i thought i could link by putting a data atribute on this button to add it to the array of images but that did not work either so will take that out

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 28, 2024, 11:31am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/53 "2024-07-28T11:31:37Z")

</div>

totally flumoxed think you need to explain what named functions do in your write up like what active link item id and all of it relate to links…i and how they act on each other… or at least a hint…please special k without reading and understanding the js bible all thousand pages dont know what to do please help

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 29, 2024, 2:20am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/54 "2024-07-29T02:20:39Z")

</div>

I think I understand what you are trying to say. The Close button appears here:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/b/5/b5b99f3ae8e9aa9e146823a7f782b6902da7267a.png)

When the Close button is pressed, should the behavior be the same as what happens when you hit the Replay button?

Also, when pasting code, select your pasted code and click on the `</>` Code formatting button in the toolbar. That will make sure the code displays properly.

Regarding this:

> [@LondonKillsMe](#):
>
> totally flumoxed think you need to explain what named functions do in your write up like what active link item id and all of it relate to links…i and how they act on each other… or at least a hint…please special k without reading and understanding the js bible all thousand pages dont know what to do please help

I do think that taking time to learn JavaScript (or preferably via my [beginners-friendly Learn JavaScript guide](https://www.kirupa.com/javascript/learn_javascript.htm)) would be more beneficial for you than trying to reverse engineer a fairly complicated tutorial.

Thanks,  
Kirupa

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 29, 2024, 6:27am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/55 "2024-07-29T06:27:26Z")

</div>

Thanks Kirupa yes will get on that guide, yes its that close button, but the function is not replay, it is go to start of animation and stop there.

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 29, 2024, 6:34am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/56 "2024-07-29T06:34:04Z")

</div>

div id=“navLinks”\>  
ul\>  
li class=“itemLinks” data-pos=“0vh”\>  
li class=“itemLinks” data-pos=“-100vh”\>  
li class=“itemLinks” data-pos=“-200vh”\>  
li class=“itemLinks” data-pos=“-300vh”\>  
li class=“itemLinks” data-pos=“-400vh”\>

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [July 29, 2024, 6:38am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/57 "2024-07-29T06:38:22Z")

</div>

the itemLink data-pos=“0” the first one that is active stop here when you click close button

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [August 1, 2024, 6:56pm UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/60 "2024-08-01T18:56:38Z")

</div>

will look at all your updates give me a couple of weeks will start posting my discoveries after learning thank you K

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [August 3, 2024, 8:10pm UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/61 "2024-08-03T20:10:10Z")

</div>

been looking into the bible and learning slowly looking at timers and loops in relation to your js for my animation what is itemId is it just a name or is it a js command, does it separate and give links a separate id. Likewise e.target - an event target? like a button click, where do i search to explain because js is so intrinsic it helps if it is explained case for case for newbies like me.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 3, 2024, 9:52pm UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/62 "2024-08-03T21:52:28Z")

</div>

You may actually find the tutorials here to be informative and more beginner-friendly than the JS Bible: [Learn JavaScript: Visual and Beginner-Friendly Tutorials](https://www.kirupa.com/javascript/learn_javascript.htm)

If you start at the top and go down, you’ll build-up your understanding of core JS concepts including the ones used by the slide show. I am almost certain that after a week, you’ll be familiar enough with JavaScript to be able to create your own slideshow 🙂

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [August 4, 2024, 6:08am UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/63 "2024-08-04T06:08:21Z")

</div>

thanks Kirupa sorry i meant that figuratively. I have been learning your javascript beginners guide.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 4, 2024, 3:58pm UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/64 "2024-08-04T15:58:06Z")

</div>

Oh haha! 😆

I have (a now older version of) the JS Bible, and it is a good book as a reference. Not for the faint of heart 😇

---

<div class="post-metadata">

**Author:** ![LondonKillsMe](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@LondonKillsMe](https://forum.kirupa.com/u/LondonKillsMe)\
**Post date:** [August 4, 2024, 5:58pm UTC](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693/65 "2024-08-04T17:58:05Z")

</div>

yep I thought eloquent javascript was good love the quotes and the writing dont understand why it a got bad reputation…?

[Previous page](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693.md?page=2)

[Next page](https://forum.kirupa.com/t/making-a-traditional-film-animation-using-kirupas-slide-show/664693.md?page=4)