Skip to main content

Animations

Grial UI Kit comes with a XAML framework to animate anything based on a numeric value that changes over time, for example as a a the result of a user interaction.

The most common example of a numeric value that changes is the scroll position. We let you change the value of any visual element property as the user scrolls through your page. This technique is used in ParallaxHeaderArticlePage.xaml to implement a parallax scrolling effect, where the the header image movement is “slower” than the scroll movement creating an illusion of depth.

You can translate, rotate, fade, scale, interpolate colors, etc.

Read more in Working with Progressive Animations.

The other piece regarding animations are the animation loops. These behaviors apply a transformation loop to any visual element:

  • KenBurnsLoop, apply a Ken Burns effect to an element; an example can be found in ProfilePage.xaml
  • PulseLoop, apply a pulse transformation to an element; an example can be found in FeaturedMovieTemplate.xaml

The loops can be started and stopped or can run indefinitely.