# Spin keeps rotating back

**URL:** <https://forums.fusetools.com/t/spin-keeps-rotating-back/4119>\
**Category:** Bug Reports\
**Created:** [December 20, 2017, 11:35pm UTC](https://forums.fusetools.com/t/spin-keeps-rotating-back/4119 "2017-12-20T23:35:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 20, 2017, 11:35pm UTC](https://forums.fusetools.com/t/spin-keeps-rotating-back/4119/1 "2017-12-20T23:35:53Z")

</div>

Hey guys,  
I am currently having an issue while trying to spin something.

I have a circle:

```auto
      <Circle ux:Name="ButtonLoader" Width="50" Height="50" StartAngleDegrees="-45" EndAngleDegrees="45">
        <Stroke Width="2" Color="Red" />
      </Circle>

```

And I am trying to spin it with:

```auto
      <WhileBusy>
        <Spin Target="ButtonLoader" Frequency="1"/>
      </WhileBusy>

```

I am starting the busy state in my Javascript with  
`busy.activate();` and `busy.deactivate();`

The spinning works but, as soon as I deactivate the busy-state, it doesn’t just stops spinning but it keeps rotating backwards and stops in its default position.

Any ideas here?

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [December 21, 2017, 8:01am UTC](https://forums.fusetools.com/t/spin-keeps-rotating-back/4119/2 "2017-12-21T08:01:05Z")

</div>

That is expected behavior. All animation in Fuse is seen as deviation from the rest state. Read all about it in our getting started docs: [https://www.fusetools.com/docs/declarative-animation](https://www.fusetools.com/docs/declarative-animation) (see the section “Backwards Animation”).

---

<div class="post-metadata">

**Author:** ![Jxns](https://avatars.discourse-cdn.com/v4/letter/j/d6d6ee/32.png) [@Jxns](https://forums.fusetools.com/u/Jxns)\
**Post date:** [December 21, 2017, 10:12am UTC](https://forums.fusetools.com/t/spin-keeps-rotating-back/4119/3 "2017-12-21T10:12:21Z")

</div>

Didn’t know about that, thank you.

I am using this for a loading animation and was still testing it.  
But changing the Opacity from 0 to 1 inside the `<WhileBusy>` “hid” the Backwards-Animation, so everything is working fine now :-).

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [December 22, 2017, 12:17pm UTC](https://forums.fusetools.com/t/spin-keeps-rotating-back/4119/4 "2017-12-22T12:17:43Z")

</div>

Hi Jxns,

changing `Opacity` sounds like a good approach in general, but I’m afraid you’re doing it in a way that is not optimal. Adding an explicit backwards animation might also be the way to, but I don’t think that’s the right approach in this case either.

Here’s something that I threw together based on the code you shared, and I think you’ll find pretty cool. There are a few tricks to this, so I’ll explain.

First, I created a component for the loader itself, so that I have a little better abstraction level:

```auto
<Circle ux:Class="Loader" Width="120" Height="120" StartAngleDegrees="-45" EndAngleDegrees="45">
	<Stroke Width="20" Color="Red" />
</Circle>

```

And then I use it in the app like so. Notice how I set the `Visibility` to `Hidden` and `Opacity` to zero:

```auto
<Panel Clicked="{triggerBusy}" HitTestMode="LocalBounds">
	<Loader ux:Name="ButtonLoader" Visibility="Hidden" Opacity="0" />

```

What I wanted to achieve was the loader to animate both in and out smoothly, all while spinning, to avoid any kind of visual jerkiness. This is where the `Visibility` comes in handy, because we can `Spin` the loader all the time it is visible:

```auto
<Circle ux:Class="Loader" Width="120" Height="120" StartAngleDegrees="-45" EndAngleDegrees="45">
	<Stroke Width="20" Color="Red" />
	<WhileVisible>
		<Spin Frequency="1"/>
	</WhileVisible>
</Circle>

```

And finally, we simply have to animate (both forward and back) as the `Busy` state changes:

```auto
<Panel Clicked="{triggerBusy}" HitTestMode="LocalBounds">
	<Loader ux:Name="ButtonLoader" Visibility="Hidden" Opacity="0" />
	<Busy IsActive="false" ux:Name="busy"/>
	<WhileBusy>
		<Change ButtonLoader.Visibility="Visible" DelayBack="1" />
		<Change ButtonLoader.Opacity="1" Duration="1" />
	</WhileBusy>
</Panel>

```

And here’s the full code that you can copy-paste and run:

```auto
<App>

	<JavaScript>
		function triggerBusy() {
			busy.activate();
			setTimeout(function() {
				busy.deactivate();
			},2700);
		}
		module.exports = {
			triggerBusy: triggerBusy
		};
	</JavaScript>

	<Panel Clicked="{triggerBusy}" HitTestMode="LocalBounds">
		<Loader ux:Name="ButtonLoader" Visibility="Hidden" Opacity="0" />
		<Busy IsActive="false" ux:Name="busy"/>
		<WhileBusy>
			<Change ButtonLoader.Visibility="Visible" DelayBack="1" />
			<Change ButtonLoader.Opacity="1" Duration="1" />
		</WhileBusy>
	</Panel>

	<Circle ux:Class="Loader" Width="120" Height="120" StartAngleDegrees="-45" EndAngleDegrees="45">
		<Stroke Width="20" Color="Red" />
		<WhileVisible>
			<Spin Frequency="1"/>
		</WhileVisible>
	</Circle>

</App>

```