×

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

Please sign in to leave a comment.

  • Avatar
    Tom Stuart

    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
  • Avatar
    Caitlin Cambron

    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
  • Avatar
    Shaina Torgerson

    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
  • Avatar
    Shaina Torgerson

    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