EasingBack seems to "overwrite" Easing?

How-to Discussions
1

I have the following layout animation. When I set Easing=“BounceIn” I get a nice bounce in animation. However, if I set EasingBack=“QuadraticOut” then BounceIn seems to stop working and appears to be something like QuadraticOut instead. I was presuming that Easing was for the “in” animation and EasingBack was for when it was reversed after the trigger is released. Or is that not the case?

Thanks again!

<LayoutAnimation>
	<Move X="1" Y="1" RelativeTo="PositionChange" Duration="0.5"
		Easing="BounceIn" EasingBack="QuadraticOut"/>
</LayoutAnimation>
2

Please provide a complete, ready-to-run example, otherwise it’s impossible to comment on the issue.

3

Sure, here you go.

Click the red panel to show the blue panel and it should bounce in. Click the blue panel to reverse the animation and it should bounce out.

But then adding EasingBack=“QuadraticOut” appears to alter the Easing[in] as well.

Thanks.

<App>
	<JavaScript>
	var Observable = require("FuseJS/Observable")
	var show = Observable(false)
	function showIt() { show.value = true }
	function hideIt() { show.value = false }
	module.exports = {
	  show: show,
	  showIt: showIt,
		hideIt: hideIt
	}
      </JavaScript>
  <DockPanel>
		<Panel ux:Name="panel" Height="100" Background="#00f" Dock="Top"
	  Clicked="{hideIt}">
			<LayoutAnimation>
				<Move X="1" Y="1" RelativeTo="PositionChange" Duration="0.5"
					Easing="BounceIn"/>
			</LayoutAnimation>
	  <Translation Y="-1" RelativeTo="Size" />
			<WhileTrue Value="{show}">
				<Change panel.Y="200"/>
			</WhileTrue>
		</Panel>
	<Panel Dock="Bottom" Height="100" Background="#f00" Clicked="{showIt}"/>
	</DockPanel>
</App>
4

I also have another question :slight_smile:

I’m reversing the Translation so that the panel comes into view using <Change panel.Y="200"/>. But what I really want is something like <Change panel.Y="height(panel)"/> like you can do with <Set>, but <Change> won’t accept height(). Is there a way I can do this?

5

LayoutAnimation describes how an element transitions from state A to state B (and to state C, and…). It’s an animation that is always played forwards, disregarding what the state A and B (and potentially others) are; there is no implicit “forward” or “backward” for it. Consequently, adding an EasingBack on it does, indeed, “overwrite” the Easing.

In your particular use case though, you don’t really need LayoutAnimation. You already have Translation, which then is the right node to animate. The different forward and backward easings can be put directly on the Change, since there we have an explicit animation between exactly 2 states.

<App>
	<JavaScript>
	var Observable = require("FuseJS/Observable")
	var show = Observable(false)
	function showIt() { show.value = true }
	function hideIt() { show.value = false }
	module.exports = {
		show: show,
		showIt: showIt,
		hideIt: hideIt
	}
	</JavaScript>
	<DockPanel>
		<Panel Height="100" Background="#00f" Dock="Top" Clicked="{hideIt}">
			<Translation ux:Name="panelTrans" Y="-1" RelativeTo="Size" />
			<WhileTrue Value="{show}">
				<Change panelTrans.Y="0" Duration="0.5" Easing="BounceOut" DurationBack="0.2" EasingBack="QuadraticOut" />
			</WhileTrue>
		</Panel>
		<Panel Dock="Bottom" Height="100" Background="#f00" Clicked="{showIt}" />
	</DockPanel>
</App>
6

Thank you, that’s great.

There are lots of nuances in Fuse so it takes a while to figure it all out! Anyway, I’m getting there… slowly :slight_smile: