Sheet modal flip icon with the opening animation

1

i have a sheet modal and i have placed an icon that points up so the user know that he should swipe up.
now it will be much better if the icon rotated to down when the sheet is expanded, so the user know he can swipe down to minimize the sheet.

how can i make the icon rotate with the expanding of the sheet modal 180 degree?

2

You can use css animations .
Check this page https://css-tricks.com/css-animation-libraries/

Then when Sheet modal is open you can make the animation.
Maybe adding a class to the icon, i think.

$$('.my-sheet').on('sheet:open', function (e) {
  console.log('my-sheet open');
// do whatever
});
3

i was wishing that it will be seamless with the pulling up of the sheet modal.
so as i pull the icon rotate.

4

You can start the animation on sheet open, so when the sheet become visible, the icon start it’s rotation.

Here are the different Events https://framework7.io/docs/sheet-modal.html#dom-events

5

but its a pull animation. so it doesn’t have a a static start and end animation. sort of like the pull to refresh icon.

6

ok,. so with some code i or someone can help,.
i think it’s was something more simple

7

i was curious on how to achieve this. it more simple than i thought


for the example i use f7 back arrow, but change the code to your needs

        const app = f7.app;
        const arrow = Dom7(".find-me");
        app.sheet.create({
          el: ".my-sheet-swipe-to-step",
          swipeToClose: true,
          swipeToStep: true,
          backdrop: true,
          on: {
            stepProgress(evt, progress) {
              const rotation = 180 * progress;
              arrow.transform(`rotate(${rotation}deg)`);
            }
          }
        });

this is an exmaple code, you have to manage with the rest of the implementation. if user its swiping and lets go the modal, the arrow dosnt rotate, you have to listen sheet:stepopen and rotate the arrow yourselfe, etc

3 Likes