[feat]: Native ability to switch to a new "idle" (looped) animation after the first (entrance) animation completes

[JayWelsh]

A clear and concise description of what the feature is

I'd like to be able to add an "idle" animation, perhaps which accepts another useSpring-defined variable, or a from and to (or any other way which makes sense).

The idea would be to loop this animation once the initial "from" and "to" has completed.

Why should this feature be included?

Whether or not there is already a recommended way to go about doing this then it would be really great to see something like this in the examples section, since I imagine a lot of people would benefit from the ability to have their animations seamlessly transition from the "entrance" animation to an "idle" (looped) animation.

Please provide an example for how this would work

An "idle" animation (e.g. idle useSpring prop), perhaps which accepts another useSpring-defined variable, or a from and to (or any other way which makes sense).

Kindest Regards, Jay

P.S. I have not been able to join via the Discord link, it might be worth creating a new invite link.

[joshuaellis]

Have you tried the loop prop?

[JayWelsh]

@joshuaellis yes I've tried the loop prop, but using the loop prop just means that the "entrance" animation would loop, I am asking for the ability to provide a distinct "idle" animation which loops after the initial "entrance" animation (i.e. they should be able to be different animations).

[joshuaellis]

I'm struggling to imagine what you're asking for, idle typically means "not doing anything" – can you mock up a pseudo code example please?

[JayWelsh]

Thanks @joshuaellis!

idle animation refers to the "default" or "resting" animation, consider a character in a game which has an "entrance" animation onto the screen but once they have entered the screen they fall back to a looping "idle" animation (i.e. they have slight movements which are looped, e.g. breathing, but they don't stand completely frozen, this is what is meant by an "idle" animation).

So the way I'd use it, for example, is to have elements animate onto the screen and once their entrance animation is complete, they would float/hover around their position with just slight movement to keep the elements looking "alive" instead of them becoming completely frozen after the initial entrance animation.

Here is a link to the term "idle animation".

Does this make a bit more sense?

[joshuaellis]

It does make more sense, thank you.

It sounds like you're wanting to create an animation script (which we do have support for currently) – i have reservations about supporting an "idle" configuration, currently we have from and to which are quite easy to understand – you go from one animation to another.

Is there a reason why you couldn't use the imperative API to set up the idle animation onRest of your initial? Might look something like this

const [springs, api] = useSpring(() => ({
	from: {
		x: 0
	},
	to: {
		x: 1
	},
	onRest: () => {
		api.start({
			from: { y: 0 },
			to: { y: 1 },
			loop: true
		})
	}
}))

[JayWelsh]

Thanks for this @joshuaellis !

onRest might possibly be a good way to go about this

If that's the case could I rather change this feature request into a request for an example to be added to the example section which just shows a basic example of this functionality? Your code "works" as it is but it doesn't really achieve the desired effect.

A description of a simple example which I think would achieve the example I've been searching for (I believe many people would use an example which achieves this):

A square div enters the screen, e.g. by an arbitrary "fly into position" type animation, after the square has reached its to position, it smoothly goes into some resting "hover" state where it just gently/slightly hovers around its current position (in a way that doesn't cause a "disruption" to the flow of the movement whenever the loop restarts). For example think of an image of a planet entering the screen and then once it finds its position the planet just gently "floats", without being completely frozen but in a way that loops without an unnatural disruption.

The current limitation that I experience with your previous example code is that the onRest animation doesn't really lead to a "smooth" resting animation, it creates a "jerky" animation where each time the loop restarts there is an unnatural movement which doesn't achieve a resting/looping-hover effect.

I'm sorry about drawing this out for so long, I just have a strong conviction that others would find this sort of example useful and I've been searching for a way to make this work for a long time without any good results.