InVision Studio tip of the week: Parallax Effects
Hello internet fam! Charles from InVision here on this glorious, glorious Tuesday morning. If you haven’t seen my first blog tip on Scrolling and Pinning for InVision’s new screen design tool, Studio, read all about it here.
We’ve got you some more Studio goods this week — designing the freshest most buttery parallax effects in Studio. Yes, yes!
Everyone likes a little “w0oOw” reaction on their screen — it’s 2018 after all — and what better way to engage users than with some parallax? This animation gives users an engaging experience with a sense of depth, as if the objects they’re looking at are nestled right within their screen. Just like the new Epicurrence site.
Let’s get you goin’ on this! To try this out for yourself, open a Studio file with your work-in-progress artboards or use this demo file. That’s what I’ll be working withbelow. We’ll start by adding an image to a mask. Like this:
The image will be the focus of your parallax animation. The mask acts as the “viewfinder” through which your users are looking at the image. Masking is simple! Just select the shape below an image and click the Toggle Mask icon in the top toolbar to mask the image using the shape underneath it.
In this step, you’re letting Studio know where the images will scroll to. Simply duplicate your artboard and drag your images over to the side a bit, to where they would be after a user panned through them.
Scoot your images over within their masks so when Studio starts animating, it knows they need to scroll over independently from the mask. Just select the images and drag.
Now Studio can do its magic.
Fortunately, Studio does all the heavy lifting here. Simply select the group of objects representing your first ‘card’ on your first artboard and click the lightning bolt icon up top (or press C to speed up your workflow). The blue pickwhip lets you add a new interaction so you can easily connect the card to the second artboard. Make sure to select Swipe Left for the Trigger and change the Transition type to Motion. Hit save, and Studio will do its work.
BOSH! Look at that… parallaxing in under 10 seconds 😎
That’s today’s tip crew! Please share all your thoughts with us on this series and the prototypes you make on Twitter — I’m super keen to check ‘em out! If you haven’t yet downloaded Studio, get it here — it’s free.
More fun stuff:
- Take a look at our Studio Jams to see what designers like you are creating with Studio (I’ve got you on this one — here’s my parallax jam)
- Follow me on Dribbble and see the concept demonstrated in this post and in my jam right here
