So, the only thing that you need to define is the range (start and finish positions). In my example, when scrolling to a certain position, the opacity should change from 0% to 100% and reverse. In my mind, the logical thing was to duplicate Tabs, position them in nearly the same position the Tabs stick when scrolling, and give them 0% opacity.Īfter that, I knew I needed to trigger that opacity change from 0% to 100% when scrolling, so I used the option Chain - an action where the changes of a property on one layer change the property of another layer. The second part of my animation was to stick tabs to the header when scrolling. I noticed that my animation was too fast, so I changed the duration time from 0.2 to 0.5. You can also change the duration of the movement. So, this is a pretty common interface and it’s easy enough. Pretty much the same thing, we only need to make sure that the position and colors are both correct. Also, I needed to be sure that the color of the text in the pill button is changed when swapping.Īfter we make sure that the pill swipes right when we click on Discussion, we also need to do that for the Info. I also repeated that step with the scroll content from both pages. When Tap, it would trigger the pill button to a certain value. So, when I click on any point, the pages should swipe. So, when you start swiping, it goes between the screens.
Make sure that position starts at the width of the first screen, in my case 375px.
Also, when copying, make sure that you add the group from Scene 2 to the page container. First, group all elements (except the ones that repeat, you can delete those), and paste them in Scene 1. The next step was inserting layers from Scene 2 to Scene 1. Make sure that the size of the container is 100% width and height. After that, I created a paging container and put my Scroll group in that container. I grouped all the elements in Scene 1 and took out all the elements from the group that are repeated in Scene 2. The first part of my animation was adding two screens to ProtoPie (Scene 1 and Scene 2). It will be much easier for you to navigate through ProtoPie. When you import screens, make sure that you renamed all the layers. Also, I assume there are a few ways to make the animation, but I’ll present mine, and maybe it will be helpful to you as well. I tried googling it, but I couldn’t find anything similar. I started thinking about the best and the easiest way to make sticky tabs in ProtoPie. Since we don’t have similar behavior in the app, I tried to animate how the tabs would stick to the header when scrolling to avoid potential misunderstandings with developers. So, the thing I was trying to accomplish here is to stick the tabs on the header when scrolling.
#Protopie trigger to scene 2 how to
Since I already know how to animate the page and content scroll, the question was how I can create the content scroll and still have the tab buttons stuck on the header. You can also import screens from Adobe XD or Figma. In the next example, I’ll show you how I animated sticky tabs, step by step.įirst, I imported screens from Sketch.
And the really cool thing is that it also imitates native interactions such as vibration, sound, accelerometer, push, etc.īecause ProtoPie is a high fidelity prototype tool, I decided to use it for my not very simple, but also not very complicated animation. Also, you can run the app on your device and test it like it’s a real app which is very helpful. Interestingly, ProtoPie has its own cloud, so you can save all your projects to the cloud and share any time. It’s easy to handle – I just send them the link, and they can see the animation at any moment, on any device. ProtoPie ended up being perfect for that. I was designing an iOS app and, since I wasn’t using default iOS behavior for all the components, I needed to show my idea to developers. I will present the problem I had and the solutions I made in ProtoPie. Here is one I found very helpful and detailed, combining lots of articles, tutorials, and courses on ProtoPie. I’m not going to write about ProtoPie’s characteristics because there is an enormous number of articles covering that topic already. Those are the reasons I decided to use it too. You don’t need any coding skills, and it’s pretty simple to use.
ProtoPie is an advanced prototyping tool that helps you create realistic prototypes and share them easily, on any device.
0 kommentar(er)
