We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Animate the swipe on a SfListView possible?

Hello everyone,

I wondered, if it's possible to animate the swipe behaviour on a SfListView. Currently it seems that it snaps directly into it's target position (0% or 100%, depending on the swipeOffset and the swipeThreshold). This doesn't feel smooth, but rather a bit clumsy.

I tried to make some kind of animations (a simple translateTo by the way) by using the swipe_started, swipe and swipe_ended events, but without any success. 

Is there anything I could do to make such kind of animations for the swipeTemplates? Also if you included such a thing, you could use these mechanics to swipe larger than the swipeOffset and when you release your swipe it animates to the max value of the swipeOffset. For example: the swipeOffset is set to 100. While swiping you swipe to a value of 150. When you end your swipe, the item animates back to the value of 100. This would be like a rubberband which snaps back to it's maximum position. Like here:

Thanks and kind regards

1 Reply

DB Dinesh Babu Yadav Syncfusion Team September 29, 2017 02:51 AM UTC

Hi Daniel 
Thank you for using Syncfusion Products. 
Support for animation in swiping  
Currently SfListView do not have support for “Swiping animation for ListViewItem”.We have already considered this as feature request and added it into our feature request list, and the feature will be available in our upcoming 2017 Volume 4 release. We will let you know once the feature has been included in the release. 
Need to swipe an item beyond the SwipeOffset value  
SfListView allows you to load multiple views in both left and right swipe by customizing the LeftSwipeTemplate and RightSwipeTemplate properties.  
You can refer the following UG documentation link for more reference. 
And based on the given information, we have prepared the sample to meet your requirement by handling the list view’s SwipeOffset property and SwipeOffSet of SwipeEnded event argument as like below code example and you can download the sample from the below link. 
Code Example[C#]: 
   private void ListView_SwipeEnded(object sender, SwipeEndedEventArgs e) 
      if (e.SwipeDirection == SwipeDirection.Right) 
          e.SwipeOffset = 50; 
      else if (e.SwipeDirection == SwipeDirection.Left) 
           e.SwipeOffset = 100; 
Please let us know if you require further assistance. 
Dinesh Babu Yadav 

Live Chat Icon For mobile
Up arrow icon