Ability to instantly set the value of an animation's value

[rbxxaxa]

Here is a usecase that I'm having trouble implementing using this module alone. Take the following code for example (this is for an animation that plays whenever the user levels up):

	local animations, playAnimation = ReactFlow.useGroupAnimation({
		play = ReactFlow.useSequenceAnimation({
			{
				timestamp = 0,
				levelUpGraphemes = ReactFlow.Tween({ start = 0, target = 20, info = TweenInfo.new(0.8) }),
			},
			{
				timestamp = 0.8,
				iconScale = ReactFlow.Spring({ target = 0.2, speed = 10, damper = 2 }),
			},
			{
				timestamp = 1.2,
				iconScale = ReactFlow.Spring({ target = 1, speed = 20, damper = 0.15 }),
			},
		}),
	}, {
		levelUpGraphemes = 0,
		iconScale = 0.6,
		groupTransparency = 0,
	})

Right now, the following things aren't possible:

• I want the animation to reset to its default values when I do playAnimation("play")
• I want to change the image of a specific icon at a certain point in the animation.
• I may also want to toggle the visibility of certain elements.

[rbxxaxa]

RobloxStudioBeta_4kkr5jzROV.mp4

I ended up using ye olde promise chain to implement the animation (as opposed to this library):

	local playAnimation, cancelPlayAnimation = usePromise(function()
		return Promise.try(function(resolve)
			setLevelUpGraphemes(ReactOtter.instant(0))
			setIconScale(ReactOtter.instant(0))
			setGroupTransparency(ReactOtter.instant(1))
			setImageForRank(RankDefs.rankToImage[currentRank])
			setRankText(currentRank - 1)
			setIconFlip(ReactOtter.instant(0))
			setPinstripeTransparency(ReactOtter.instant(1))

			return Promise.delay(0)
		end)
			:andThen(function()
				PlayStereoSound.new({ soundName = "RankUpWindUp" })

				setGroupTransparency(ReactOtter.ease(
					0,
					{
						duration = 0.1,
					} :: any
				) :: any)

				setLevelUpGraphemes(ReactOtter.ease(
					30,
					{
						duration = 2,
					} :: any
				) :: any)

				return Promise.delay(1)
			end)
			:andThen(function()
				setIconScale(ReactOtter.spring(
					1,
					{
						frequency = 8,
					} :: any
				) :: any)

				return Promise.delay(0.4)
			end)
			:andThen(function()
				setIconScale(ReactOtter.spring(
					0.4,
					{
						frequency = 4,
					} :: any
				) :: any)
				setIconFlip(ReactOtter.spring(
					10,
					{
						frequency = 2,
					} :: any
				) :: any)

				return Promise.delay(0.4)
			end)
			:andThen(function()
				PlayStereoSound.new({ soundName = "RankUpFireworks" })
				setImageForRank(RankDefs.rankToImage[currentRank + 1])
				setRankText(currentRank)
				setConfettiUnique(function(v: number?)
					if v == nil then
						return 0
					else
						return v + 1
					end
				end :: any)
				setIconScale(ReactOtter.spring(
					1,
					{
						frequency = 5,
						dampingRatio = 0.3,
					} :: any
				) :: any)

				return Promise.delay(0.5)
			end)
			:andThen(function()
				setPinstripeTransparency(ReactOtter.spring(
					0.3,
					{
						frequency = 2,
					} :: any
				) :: any)

				return Promise.delay(4)
			end)
			:andThen(function()
				setGroupTransparency(ReactOtter.ease(
					1,
					{
						duration = 0.4,
					} :: any
				) :: any)
			end)
	end, { currentRank })

• usePromise is just a hook that memoizes a promise and also cancels the previous running promise chain whenever it's invoked.
• setConfettiUnique is a React state that triggers a separate component's animation when it changes.
• PlayStereoSound plays a sound effect.

If I'm able to fire off arbitrary callbacks in a group animation's sequence, that would make this library very versatile!

[GreenDeno]

Hi xaxa, I think I understand what you are trying to do, but please correct me if I'm wrong. For the sequence animation, you want the animation to start at the default values rather than remain continuous, and you can achieve that by using a fast / immediate tween at the first timestamp

local animations, playAnimation = ReactFlow.useGroupAnimation({
	play = ReactFlow.useSequenceAnimation({
		{
			timestamp = 0,
			levelUpGraphemes = ReactFlow.Tween({ start = 0, target = 20, info = TweenInfo.new(0.8) }),

			-- reset to default values
			iconScale = ReactFlow.Tween({ target = 0.6, immediate = true}),
			groupTransparency = ReactFlow.Tween({ target = 0, immediate = true}),
		},
		...
	}),
}, {
	levelUpGraphemes = 0,
	iconScale = 0.6,
	groupTransparency = 0,
})

And as for updating the icon + visibility of elements at certain points in the animation, you could map to a progress binding like so

Icon = animations.levelUpGraphemes:map(function(progress)
	return progress > 0.5 and ICON_ONE or ICON_TWO
end)

[GreenDeno]

If I'm able to fire off arbitrary callbacks in a group animation's sequence, that would make this library very versatile!

That's an interesting idea! In general, it's not recommended to trigger side effects outside of React's lifecycle, but I can see the need (like playing a sound at a specific animation timestamp). Do you have any recommendations on how you'd expect it to work?

[rbxxaxa]

Ahh, I didn't know immediate = true was a thing! It's not documented anywhere in the readme. That's very handy. I had tried setting a tween's duration to 0 to achieve the same effect but that didn't seem to work.

And as for updating the icon + visibility of elements at certain points in the animation, you could map to a progress binding like so

I think there may be cases where I may want to change an icon at a certain point in the animation that isn't necessarily linked to a binding reaching a certain value.
I think it's also pretty valuable from a readability/maintainability POV that the icon changing is in the animation chain itself instead of outside it.

Do you have any recommendations on how you'd expect it to work?

No, I think I'll leave that up to you!