I am trying to implement an animation into my prototype where part of one screen can be pulled down to fill up the entire screen, and then be pushed up again to become only part of the screen.
Here is the first page:
The image of the nightclub at the top of the page I want to be able to drag down so it fills the whole page like this:
What I have tried so far is to have the image of the nightclub as an overlay and then use these animation settings:
This results in the overlayed image sliding in from the very top of the screen instead of expanding out from the bottom of where the image already is.
The effect I desire to achieve is one whereby as you drag your finger down whilst it is placed on the image, the image would progressively get bigger in accordance to how far you bring your finger down and then would go full screen once you let go with your finger. You could then swipe up to make the image smaller again and scroll through content below it.
The effect I want is exactly the same as pulling down the notification centre in iOS, except the image is already half open on my screen whereas the notifications centre is completely hidden until you do the gesture.
I hope this makes sense and someone has discovered how to achieve this animation in Invision.
If you have I would greatly appreciate you sharing with me how to do it.