SharePoint 2013 - Short Introduction to Animation Engine

Already noticed the "fade in" effect on the page while browsing in SharePoint 2013?
No? Open a standard Teamsite and focus the main content...

Before

After

 

So, how does this work?

Some site templates uses the Minimal Download Strategy (MDS) framework. This framework consists of several components working together to only download the changes between the different pages. The main component is the start.aspx application page (as I said, there are more components to make this work). This page is responsible for loading pages from the site using the MDS. I don't want to write an in-depth article about MDS here...our main focus is the animation effect, remember? :) The codebehind of this page is defined in the following class: Microsoft.SharePoint.ApplicationPages.MDSStartPage.

The startpage will, among other things, register the start.js script. This script contains a javascript object, called the AsyncDeltaManager. This object will handle the delta requests/responses. When the AsyncDeltaManager retrieves a delta, he will call (at the end) the BeginTransitionAnimation() javascript function. This function does the preparation for the animation effect, ONLY if the MDS animation is enabled. At the end, the animation effect will be started in the EndTransitionAnimation() function. This is where the magic happens. He will call the SPAnimationUtility.BasicAnimator.FadeIn(content, null, null); command!

As far as I know, the fade effect is only used for the following placeholders:

• PagetitleInTitleArea
• Main

Can we disable the animation effect?

Yes, we can! (HTML5) web storage is used to enable/disable the animation effect. Below you'll find a couple of commands you can use...

SPAnimation.Settings.EnableAnimation(); //enable animation
SPAnimation.Settings.DisableAnimation();//disable animation
SPAnimation.Settings.DisableSessionAnimation();//disable animation only for this session
ToggleAnimationStatus();//toggle animation
SPAnimation.Settings.IsAnimationEnabled(); //check whether animation is enabled