Jonathan Hau demos InVision's Motion feature, showing transitions like slides, dissolves, flips, and 3D effects, plus overlays, opacity settings, and parallax. The walkthrough covers timing, easing, and pre-made effects with questions from the audience about overlay behavior and release timing.
Chapters
But that's primarily what designers would use. Now, we have some pretty cool design tips and tricks that designers can do to create different effects inside InVision. So some of the more basic things are using gestures to kind of set your gestures and set them between screens. But you can also do transitions like slides, dissolves, pushing left and right, flips, and that sort of thing. In addition to some of these more basic transitions, There's also what we call screen overlays. And overlays are really cool because you can do modal windows or things that are like interstitials that appear on top of this screen. So if you take this hotspot, for example, I'm just going to make an overlay here. I can set a loading screen that might appear on top of this existing screen. All right. So I'm just going to set a custom position on this screen, and I'll take this this interstitial or this modal and move it to be in a custom location on top of this existing screen. So I'll just set that right here. I'll hit Enter to set my position. Choose a specific transition. I can have it, let's say, do a 3D sine transition. And I'll set an opacity setting at 50% around that modal. So I'll just set that there and I'll hit Save. Once I go back to my preview mode, I'll click on that hotspot area. And you'll see what InVision has done is it's 3D flipped the item into view, into that custom location that I placed it, and set a 50% opacity setting around that image automatically for me. So the designer doesn't even have to do any of this design work. All they need to do is mock up that individual overlay screen, and InVision handles the rendering of that for you. Sure.
Can you insert— This block skins over the overlay?
Like another overlay on top of this existing overlay?
Yeah, like a button that appears on the overlay.
Yeah, yeah. You can do overlays on top of other overlays. Now, in this particular version—
This is the same screen, right? This thing.
This is a different— this background screen is the same screen. But this new screen that we're putting in here is a different screen. Yeah. Now, we're working on a whole set of really advanced set of motions, like micro animations, pre-made effects, things that allow you to adjust the timing, easing in the transitions between screens, and to do parallax— things like parallax scrolling. Those types of things are really advanced. And I'm going to play a quick 2-minute video to kind of showcase some of those really cool features that we're going to be releasing here very shortly. So give me one second here. So the feature is called Motion. Hold on for just a second here.
All right.
When you need to show people—
hold on, let me let that buffer.
When you need to show people how your designs fit together, you make a prototype. But what do you do when you need to show someone exactly how things animate when you click a Well, that's why we've been working on Motion, Advanced Interactions by InVision. You'll easily create rich and powerful interactions that are as simple or complex as you want. Our animation engine will do the heavy lifting for you, but you can always take control and adjust the duration, timing, and easing of your animation, bringing your vision to life. You can also quickly apply pre-made effects to save time or dive into the code editor to take even more control. Motion will work with Photoshop files, Sketch files, or layers of images that you've added manually. And it's coming soon. Motion by InVision. Advanced interactions for better design.
All right.
So that's just a quick preview of what we're planning on releasing here with Motion. But the whole idea behind it is to get pixel-perfect representations of your micro animations down to the timing and the easing associated with how something might fly in or how a button might hover or bubble or glow as somebody's interacting with your designs, even before any code has been written by your engineers. So all of that is basically to say that you can speed up the iterative process that you're doing from a design perspective before you're going to an engineering team and saying, this is what we need you to build out.
All right.
Any questions on any of those features before I move on?
That's new? Is that already released?
That's not released yet. It's something that we're planning on releasing before the end of the year. Oh.
