Looking to potentially animate elements on the page with Framework7 in a similar way that the iOS podcasts app animates the size of the podcast cover art, or fades in/out elements as the medial player size increases. For an example of this, please see this video:
I have tried using a mutation observer on the margin css attribute as the panel expands/slides up to do something like this, but it feels hacky to me, and I am wondering if there is a way within Framework7 that I could accomplish this in an easier way than writing my own mutation observer library to perform these types of animations. I ask because I can see this sort of behaviour in some instances of the Framework7 UI like when you swipe back in the iOS skin, the previous page slides in at a different speed than the panel on top, so the system that is used to accomplish this could probably be used to produce an effect similar to the iOS podcasts app linked above.
Cheers
Gave you example here https://github.com/framework7io/framework7/issues/3225 Is this what you are looking for?
@nolimits4web thank you for the follow up on that one! Though, this isn’t my intention of this post in particular. I am looking specifically at the resizing of the cover art, as it increases in size as the sheet expands further.
You have accomplished this in the navbar section F7 where as you swipe back in the iOS version of the app, the titles will slide in correlation with the back swipe gesture.
Usually this should be done with events, like swipe back event, where in that event listener we do required modifications based on some event data, like swipe back progress. Right now, it is not available for Sheet, but i already added such event https://github.com/framework7io/framework7/commit/89b038395935d9961cebde3c02a08d39bbe78648 It will be available in next update, and you will be able to listen for sheet swipe progress change and do required things based on this
1 Like