Inconsistent opacity behavior in scale transition

[fgaudo]

Describe the bug

I was experimenting with transitions and I believe I’ve found a bug in the scale transition, specifically related to how it handles opacity.

The documentation for scale states:

Animates the opacity and scale of an element. in transitions animate from the provided values, passed as parameters, to an element's current (default) values.

This works as expected when the element's default style has opacity: 1 and you pass opacity: 0 to the scale transition — it smoothly fades in from 0 to 1.

However, if you reverse it — i.e. set the element’s default opacity to 0 and pass opacity: 1 to the scale function — the element never appears. The transition seems to have no visible effect.

I believe the problem is on this line

svelte/packages/svelte/src/transition/index.js

Line 167 in c544a59

const od = target_opacity * (1 - opacity);

I tried to fix it on my own and came up with this

const od = target_opacity - opacity;

This way the transition seems to behave correctly in both directions. That said, I'm still new to Svelte, so I’m not sure if this could have consequences in other animations..

Reproduction

https://svelte.dev/playground/cc49650a563446849594dd179537ce35?version=5.25.7

You can see the difference between the normal scale function and scale2 (my fix).

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 17.64 GB / 31.92 GB
  Binaries:
    Node: 22.14.0 - ~\AppData\Local\pnpm\node.EXE
    npm: 10.9.2 - ~\AppData\Local\pnpm\npm.CMD
    pnpm: 10.6.3 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (131.0.2903.99)
  npmPackages:
    svelte: ^5.25.7 => 5.25.7

Severity

annoyance

[andriytyurnikov]

Friendly reminder, intro element has bigger auto z-Index, and outro may be invisible behind intro element.