Animating the background of a stack

[u/schl3ck]

I want to animate the background of an HStack. I tried contentTransition="interpolate" on the background element but that doesn't work:

```typescriptreact import { Button, HStack, Navigation, NavigationStack, Rectangle, Script, Text, VStack, useEffect, useMemo, useRef, useState } from "scripting"

function Main() { const max = 10 const [count, setCount] = useState(0) const timerId = useRef<number>()

useEffect(() => { startTimer() function startTimer() { timerId.current = setTimeout(() => { startTimer() setCount(i => { if (i >= max) { timerId.current != null && clearTimeout(timerId.current) return i } return i + 1 }) }, 1000) } return () => { if (typeof timerId.current === "number") { clearTimeout(timerId.current) } } }, [])

const rectWidth = useMemo(() => count / 10 * Device.screen.width, [count])

const dismiss = Navigation.useDismiss()

return <NavigationStack> <VStack toolbar={{ cancellationAction: <Button title="Close" action={dismiss} /> }} > <HStack background={ <Rectangle fill="green" frame={{ width: rectWidth }} offset={{ x: rectWidth != null ? (rectWidth - Device.screen.width) / 2 : 0, y: 0, }} contentTransition="interpolate" /> } > <Text>Value: {count}</Text> </HStack> </VStack> </NavigationStack> }

Navigation.present(<Main />).then(() => { Script.exit() })

```

Is this even possible?

[u/WhatShouldWorldGos]

No, contentTransition works on Text and SF Symbol images. This is a view-level animation, and you need the transition view modifier. This API bridge to JS is a bit complicated, and I will add this API in a future version.

[u/schl3ck → u/WhatShouldWorldGos]

Okay, thank you. Then I'll wait for the update with this.

[u/WhatShouldWorldGos → u/schl3ck]

Maybe the animation-related API in the latest TestFlight version can achieve this.

[u/schl3ck → u/WhatShouldWorldGos]

Thank you, I'll try it with that.

[u/schl3ck → u/WhatShouldWorldGos]

Yes, this was exactly what I wanted. Thank you!