Rotate content on pan


#1

Hi

I want to animate my page, so when the user pan on the screen the content rotate in the direction of the pan.

I am a bit stuck on how to do that.

I first tried to use the pan gesture. In the method associated with the pan event I retrieve my element with a viewchild annotation and change it’s style. Here is my method.

    move(event) {
      var width = this.htmlQuestion.nativeElement.offsetWidth;
      var ratio = event.deltaX/width;
      var deg = 90 * ratio;
      var transform = 'transform-origin: 50% 100%;transform: rotate(' + deg + 'deg)';
      this.htmlQuestion.nativeElement.parentElement.style = transform;
    }

I have two problems here

  • I don’t think this is the recommended way to animate something in ionic
  • it works in the browser but not on the device

Does somebody have some advices on how to do this ?

Regards
Seb