1

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 …

Monegasqu
  • 13
  • 1
  • 3
  • Salut (French guy here too) I'm sure it's possible but definitely not straighforward. Ionic's slide component is based on Swiper (https://swiperjs.com/demos/) and I don't think it has that kind of transitions. Note also that ion-slides does not move between page but between slides. So you might want to implement custom page transitions... Not sure how you want to apply it. – Sébastien Jun 03 '20 at 13:28
  • Thanks ! There are interesting things but I don't think it will help me ... – Monegasqu Jun 03 '20 at 13:46
  • As you said, my problem is mainly about the transition – Monegasqu Jun 03 '20 at 13:47

1 Answers1

2

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.

Sergey Rudenko
  • 8,809
  • 2
  • 24
  • 51