Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Tom Stuart Tom Stuart

Help With Drag Gestures (finger not breaking contact from drag down element)

Hi,

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.

Thanks,

Tom   

0

comments

sort by


Tom Stuart
InVision ambassador Tom Stuart , ambassador

This would be the solution to my problem I think:

https://www.youtube.com/watch?v=TxdMkuyZURQ

But I'm on Windows so can't get Invision studio.

This is quite annoying 😤

0

Caitlin Cambron
InVision ambassador Caitlin Cambron , ambassador

Hi Tom!

I'm sorry you're experiencing this. These types of animations are in fact possible with InVision Studio! I personally use the prototyping tool only for simple transitions, not fancier ones like this. Depending on what you need this for, I would suggest a simple tap or slide transition. I tend to explain to my clients that prototypes can't do everything because they're just image-based drafts. Wondering if that could work in your situation?

I'm passing your suggestion about Studio for Windows along to InVision staff - they are working on to improve Studio every day!

Hopes this helps! Have a happy Friday!

Caitlin

 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Tom,

Thanks so much for reaching out here in Community for some advice on this matter. As our Ambassador, Caitlin, mentioned, Studio is truly the best way to achieve this at this time.

Sorry to hear that you are awaiting the release of Studio for Windows and cannot achieve this at the moment. I will open a ticket on your behalf with Support so that they can keep you in the loop on Studio for Windows, as well as potentially offer some more feedback regarding this matter. Please look for a message from our Support team soon.

Thanks for hanging in there,

Shaina

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Tom,

I wanted to take a moment to follow up on this thread and thank you for your feedback. Today we’re happy to introduce the first version of Studio for Windows! Studio for Windows has been our most requested feature to date, and we appreciate your patience as our team has been hard at work to bring a feature-rich and performant experience to creative community across Mac and Windows.

From the start, multi-platform support has been an important part of the Studio roadmap. Our Windows app comes with the same powerful feature set that’s available for Mac, so no matter which OS you choose, you can design, prototype, and animate all in one place.

This is just the beginning of our journey, and we can’t wait to hear your feedback as we continue to make your experience the best yet.

To learn more about Studio (for Windows and Mac), check out these resources: 

Getting Started with Studio
Studio FAQs
Learn Studio

Studio for Mac and Windows. Download now—free.

Thanks,

Shaina

0

join the conversation

to comment, sign up or sign in.