Search code examples
angularionic4swipe

Implement liquid swipe with Ionic Angular


I’m relatively new to Ionic and I want to make an application that uses swipe features ! I’ve found something interesting that is liquid swipe. I know that it’s possible with Flutter (https://www.youtube.com/watch?v=svvJFb-LsgY 1) but I want to know if it’s possible with Ionic-Angular. Is there a library or have I to do it by myself ? My question is not about how to deal with gestures but about the visual effect.

Thanks for your help.

PS : Sorry for my English, I’m a French guy …


Solution

  • This answer won't give you exact implementation, but just the path of how that can be achieved.

    Ionic slides (ion-slides) as pointed out in comments leverages iDangerous's swiper (swiperjs) under the hood, which allows customization of transition.

    Ionic documentation features example of how you can customize in-built transition effect:

    https://ionicframework.com/docs/api/slides#custom-animations

    But to pull off something more sophisticated you need to leverage "virtualTranslate" option:

    Enable this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition

    https://swiperjs.com/api/

    You can check this article for details of how to implement custom transition with this option and also using GSAP: https://medium.com/@arnost/creating-custom-slide-transitions-in-swiper-js-also-with-gsap-ac71f9badf53

    GSAP is a very powerful animation library, which allows animating both web elements and SVG.

    Since the liquid swiper you have in mind acts dynamically based on user touch input you will need to count that in of course. So implementation path is there, its just tedious and hardly SO will give you exact implementation answer.