# LayoutAnimation question/problem

**URL:** <https://forums.fusetools.com/t/layoutanimation-question-problem/951>\
**Category:** How-to Discussions\
**Created:** [September 6, 2016, 3:53pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951 "2016-09-06T15:53:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [September 6, 2016, 3:53pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/1 "2016-09-06T15:53:58Z")

</div>

Hello again,

i am trying to build a year changer inside my app. The concept is to have a small `rectangle` with the year inside and when pressed animate changing it’s width and height so you can change the year. Also i want the user to be able to close/deactivate it when clicking anywhere else on the screen. My problem is that when i `click` anywhere else it triggers both panel’s and rectangles `Handler`. Here is the code :

```auto

<Page ux:Class="Year">
	<JavaScript File = "year.js"/>
	<DockPanel Width="100%" Height="100%" HitTestMode="LocalBoundsAndChildren">
		<Panel Height="5%" Dock="Top" Margin="0,40,0,0">
			<Text Value="Choose Starting Year" FontSize="20" Color="White" TextAlignment="Center" />
		</Panel>
		<Panel Width="100%" Height="95%" Dock="Bottom">
			<Panel ux:Name="self" Visibility="Visible" Width="40%" Height="50" Color="#9F9F9F" Opacity="0.5">
				<Text Value="{year}" Alignment="Center" FontSize="25" Color="Black"/>

				<WhileTrue Value="{yearInput}">
					<SwipeGesture Direction="Up" ux:Name="SwipeUp" Length="20"/>
					<Swiped Source="SwipeUp">
						<Callback Handler="{moveUp}"/>
					</Swiped>

					<SwipeGesture Direction="Down" ux:Name="SwipeDown" Length="20"/>
					<Swiped Source="SwipeDown">
						<Callback Handler="{moveDown}"/>
					</Swiped>
					<Change self.Color="#fed166" Duration="0.25"/>
					<Change self.Opacity="1" Duration="0.25"/>
				</WhileTrue>

				<Clicked Handler="{enableYearFiltering}">
					<Set self.Width="70%"/>
					<Set self.Height="25%"/>
					<Set self.Color="#fed166"/>
					<Set self.Opacity="1"/>
				</Clicked>
				<LayoutAnimation>
		            <Resize X="1" Y="1" RelativeTo="LayoutChange" Duration="0.25"/>
		            <Move X="1" Y="1" RelativeTo="LayoutChange" Duration="0.25"/>
		        </LayoutAnimation>
			</Panel>
		</Panel>
		<Clicked Handler="{disableYearFiltering}">
			<!-- <Set self.Width="40%"/>
			<Set self.Height="50"/> -->
		</Clicked>
	</DockPanel>
</Page>

```

Also, i found on one of the examples the `SwipeGestures` Up and Down and i used them so i can increase and decrees the year number but that way it changes one number at a swipe… Is there a tutorial or a way to do it and have a continuous change of the numbers ?

Thanks in advance 🙂

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [September 8, 2016, 1:53pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/2 "2016-09-08T13:53:46Z")

</div>

Anyone ? I would really need some help with that

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [September 13, 2016, 2:09pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/3 "2016-09-13T14:09:31Z")

</div>

Hi!

Are you able to share the project? Its hard to test to see what you have already done when most of the code is missing from your example 🙂

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [September 13, 2016, 2:18pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/4 "2016-09-13T14:18:05Z")

</div>

Hello, I managed to solve my problem but I have another question about this. As I described at the end of my first post I want to be able to swipe up and down and increase / decrease a number but I don’t want to increase it by 1 at a time. What I want is the user to be able to as long as he swipes, the number to change. Is there a way to do this ?

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [September 14, 2016, 10:09pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/5 "2016-09-14T22:09:04Z")

</div>

It’s doable, Idk how. But another suggestion is to design a stepper instead, where the value you can also type a number instead.

So in the middle you have the `TextInput` and on the sides you have a plus/minus buttons that increase the numbers. I think that may be better. Then perhaps when Fuse implements a Date/Time picker that is native to the OS you’ll be able to use that.

Let me know what you think?

---

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [September 14, 2016, 10:14pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/6 "2016-09-14T22:14:17Z")

</div>

Yeah I did that with the plus minus buttons! Okay then I will leave that for a future update of fuse/my app 😃 thank you very much for your time 🙂

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [September 14, 2016, 11:19pm UTC](https://forums.fusetools.com/t/layoutanimation-question-problem/951/7 "2016-09-14T23:19:33Z")

</div>

No problem happy to help