# How to expand shape to 2x screen width

**URL:** <https://forums.fusetools.com/t/how-to-expand-shape-to-2x-screen-width/5173>\
**Category:** How-to Discussions\
**Created:** [August 27, 2016, 12:50pm UTC](https://forums.fusetools.com/t/how-to-expand-shape-to-2x-screen-width/5173 "2016-08-27T12:50:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [August 27, 2016, 12:50pm UTC](https://forums.fusetools.com/t/how-to-expand-shape-to-2x-screen-width/5173/1 "2016-08-27T12:50:15Z")

</div>

I have a `Circle`, it has `Width="0"`, and I need the `Width` to be equal to the width of the screen x 2

The problem is that the `Circle` is in a panel in a panel in another panel so I can’t just do `Width="200%"`,

I can’t use `Scale` because the Circle won’t scale up as a vector which causes pretty bad distortion around the edges.

I’m trying to replicate the ripple effect that we see a lot in Material-style animation, a solution would be to just use a really large fixed value, but then on some screens the animation would be way too fast, while on others it would be just right. The goal is to have the Circles expansion slow down, and ease out as its about to fill the space.

How do I do this?

Cheers

---

<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:** [August 27, 2016, 1:15pm UTC](https://forums.fusetools.com/t/how-to-expand-shape-to-2x-screen-width/5173/2 "2016-08-27T13:15:25Z")

</div>

Do you have an example of the effect you wish to create? Like, a link to somewhere we can see this particular animation?

---

<div class="post-metadata">

**Author:** ![Fahad](https://avatars.discourse-cdn.com/v4/letter/f/ecccb3/32.png) [@Fahad](https://forums.fusetools.com/u/Fahad)\
**Post date:** [August 27, 2016, 1:18pm UTC](https://forums.fusetools.com/t/how-to-expand-shape-to-2x-screen-width/5173/3 "2016-08-27T13:18:37Z")

</div>

Sure, [here it is](http://imgur.com/A5nc7s4).

Here I used a fixed value which works nicely (a bit too fast) on the local preview.

UPDATE: So I messed around with the controls to get the circle in a parent which has the screen width. The problem is the `<Circle>` has `Width` and `Height` not `Radius`, which means that when i do:

```auto

<Panel Height="250" >
	<Circle ux:Name="bgCircle" Fill="#00E676" Width="0%" Height="0%" Alignment="BottomRight" Anchor="50%, 50%" TransformOrigin="Anchor">
		<LayoutAnimation>
			<Resize RelativeTo="SizeChange" X="1" Y="1" Duration="0.5" Easing="CircularIn" />
			<Move RelativeTo="PositionChange" Vector="1" Duration="0.5" Easing="CircularIn" />
		</LayoutAnimation>
	</Circle>
	<WhileTrue ux:Name="AddingNewWeight">
		<Change bgCircle.Width="300%" />
		<Change bgCircle.Height="300%" />
		...
	</WhileTrue>
</Panel>

```

The circles Width is limited by the height, which has nothing to do with the width.  
To explain further, since the above panel has a height of `250` and I can’t do something like `Height="Width"`, I’m only doing 300% of 250 (750).