Scroll up animation

How-to Discussions
1

Hi,
i used the ScrollAnimation Class to obtain the animation in the video.
This is the code:

<DockPanel>
		<BottomBarBackground Dock="Bottom" />
		<Circle Color="#000" Height="100" Width="100" ux:Name="test" Alignment="BottomRight" Margin="20"/>
		<ScrollView>
			<StackPanel>
				<Each Count="10">
				<Rectangle Color="#0004" Width="100%" Height="100" Margin="0,20"/>
				</Each>
			</StackPanel>

			<ScrollingAnimation From="0" To="50">	
				<Scale Target="test" Factor="0" Easing="QuadraticInOut" Duration="1"/>
			</ScrollingAnimation>
		</ScrollView>
	</DockPanel>

I wanted to have the circle back as soon as i scroll up again. At the moment it appears when i get back to the position “50”.

I’ve just edited the post with a complete example.

2

You can take a cue from this example where the header disappears and reappears when you scroll according to the direction of scrolling.

However, the example in this repository is quite complex in my opinion and the components used are poorly documented.