Hi Prajakta,

Sorry for previous response, it was meant for another forum post.

As I mentioned before, WebSplitter does not support animation. In another post I already gave you an example for custom animation on external event. Below is example for situation when default expand/collapse buttons of WebSplitter are used. It cancels default functionality and implements custom animation: changes size of pane and collapses/expands pane explicitly.

<script type="text/javascript">
function WebSplitter1_Collapsing(sender, eventArgs) {
  var pane = eventArgs.get_pane();
  // expand effect will not work properly for locked pane, so use defaults
  if (pane.get_locked())
    return;
  var size = pane.get_size();
  pane._valueOfOriginalSize = size;
  var timer = setInterval(function() {
    size -= 20;
    pane.set_size(Math.max(10, size));
    if (size <= 10) {
      clearInterval(timer);
              pane.set_collapsed(true);
    }
   }, 30);
   eventArgs.set_cancel(true);
}

function WebSplitter1_Expanding(sender, eventArgs) {
  var pane = eventArgs.get_pane();
  var size = pane.get_size(), endSize = pane._valueOfOriginalSize;
  // situation when pane was collapsed on server 
  if (!endSize) {
    endSize = size;
    size = 10;
  }
  if (endSize <= size)
    return;
  pane.set_collapsed(false);
  var timer = setInterval(function() {
    size += 20;
    pane.set_size(Math.min(endSize, size));
    if (size >= endSize)
       clearInterval(timer);
   }, 30);
   eventArgs.set_cancel(true);
}
</script>

<ig:WebSplitter ID="WebSplitter1" runat="server" Height="400px" Width="70%">
  <ClientEvents Collapsing="WebSplitter1_Collapsing" Expanding="WebSplitter1_Expanding" />
  <Panes>
    <ig:SplitterPane runat="server" Size="25%" CollapsedDirection="NextPane">
      <Template><asp:Button ID="Button3" runat="server" Text="Button" /></Template>
    </ig:SplitterPane>
    <ig:SplitterPane runat="server" Size="50%" CollapsedDirection="PreviousPane">
      <Template><asp:Button ID="Button1" runat="server" Text="Button" /></Template>
    </ig:SplitterPane>
    <ig:SplitterPane runat="server" Size="25%" Locked="true" CollapsedDirection="NextPane">
      <Template><asp:Button ID="Button2" runat="server" Text="Button" /></Template>
    </ig:SplitterPane>
  </Panes>
</ig:WebSplitter>