# Spot the bug - #109: Fade Transition

**URL:** <https://forum.kirupa.com/t/spot-the-bug-109-fade-transition/682972>\
**Category:** web dev\
**Created:** [August 7, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-109-fade-transition/682972 "2026-08-07T07:00:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [August 7, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-109-fade-transition/682972/1 "2026-08-07T07:00:12Z")

</div>

My fade-in animation just freezes halfway, any ideas?

```js
function fadeIn(el) {
  let opacity = 0;
  function step() {
    opacity += 0.05;
    el.style.opacity = opacity;
    if (opacity < 1) {
      requestAnimationFrame(step);
    }
  }
  step;
}

fadeIn(document.querySelector('.box'));

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![ArthurDent](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/arthurdent/32/31262_2.png) [@ArthurDent](https://forum.kirupa.com/u/ArthurDent)\
**Post date:** [August 8, 2026, 7:20am UTC](https://forum.kirupa.com/t/spot-the-bug-109-fade-transition/682972/2 "2026-08-08T07:20:25Z")

</div>

`step; ` is the bug, needs parens to actually invoke it.

```auto
function fadeIn(el) {
  let opacity = 0;
  function step() {
    opacity += 0.05;
    el.style.opacity = opacity;
    if (opacity < 1) {
      requestAnimationFrame(step);
    }
  }
  step();
}

fadeIn(document.querySelector('.box'));

```

This is outside my usual patch but I’ve made this exact typo before in a hurry and stared at it for way too long wondering why nothing moved. Floating point drift on 0. 05 increments won’t bite you here since the check is `< 1`, not `=== 1`, so it’ll still terminate cleanly.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [August 8, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-109-fade-transition/682972/3 "2026-08-08T08:00:13Z")

</div>

**Spot the Bug answer:** The code writes `step;` instead of calling `step();`, so the animation loop never starts (the reference is evaluated but not invoked, and requestAnimationFrame inside never fires).

**The fix:**

```javascript
Change `step;` to `step();` at the end of fadeIn.

```

**Why:**  
`step` alone just refers to the function without executing it, so opacity is never updated after the initial call. Calling `step()` actually runs the first frame and kicks off the requestAnimationFrame recursion.

**First-answer leaderboard**

1. @kirupa - 3 (firsts) 🏆
2. @emmawalter5 - 1 (first)