For the condition’s properties, set the x position of the switch to 144.5. Underneath the trigger, select the ‘+’ and add a “Condition”. With the switch selected, add the trigger ‘ Tap’:Ģ. To move the sun, a “Trigger” must first be created. This is our first interaction which will provide the ‘framework’ for the rest of the events that will occur when the toggle is tapped. The first step will jus be to move the sun from left to right. We start by adding a Trigger to move the sun: Step 1: Moving the Sun
#Protopie dropdown how to#
This tutorial is a continuation of that, showing you step-by-step how to make your own. Thanks to ProtoPie for sponsoring this ProtoBites series.ĭownload the final demo file from the ProtoPie cloud and try it out.The introduction of this series, Elements of a Microinteraction in ProtoPie, outlined what microinteractions are, why they’re important, and how to navigate ProtoPie when creating them. The possibilities are endless and I can’t wait to see what everyone comes up with! There are lots of conditions that can be added to create more complex interactions. As you can see from the tutorial, it’s all about small alterations and combining them to give a unique aspect to your micro-interaction. For the Move condition, set the position of the star to x=-24 and y=38Ĭongratulations! We have made the light to dark mode toggle with some cool illusions. Set the duration to 0.8, and the start delay to around 0.5.Ģ. Follow the steps above, but set the start position of this star to x = 24 and y = -38. Follow step 3 of Star 1, but use x = -70 and y = 62. Set the duration to 0.8 and the start delay to 0.55.ģ.
The tension and friction are the same values.Ģ. Follow the above steps, but set x = 70 and y = -62. Choose the ‘Ease In & Out’ easing and set to’ Cubic’, with a duration of 0.2. Underneath conditions 2, add a new ‘Move’ condition with position set to ‘Move By’ and x = -85 and y = -8. Change the duration to 0.8 and the start delay to 0.51.ģ. Set the easing to ‘Spring’ and the tension at 300 and the friction to 15.Ģ. With star 1 selected, add the ‘Move’ condition to conditions 1 and select the ‘Move By’ with x = 85 and y = 8. Here’s exactly the inputs I used in ours: Star 1 ⭐️ġ. It’s all quite experimental and depends on the type of motion you want to get. In this segment, each star will be referred to by a number (i.e star 1, star 2 and star 3).Īnimating the stars is pretty much the same as moving the clouds above. In our final part, we will move the stars! The process is very similar to moving the clouds. Here’s some of those settings, and see the video for more detail: Moving the Stars Since I want to create the effect of pulling the other clouds, the movement of cloud 3 will be quicker than that of the previous. In order to do this, change the easing to ‘Ease In & Out’ with ‘Cubic’.
Cloud 2 Start Settings Cloud 3 ☁️☁️☁️įor the 3rd cloud, a different easing can been used to give a pulling effect on the previous clouds. Varying the duration can create different effects such as the illusion of separation between the previous cloud 1. Cloud 2 ☁️☁️įollow the steps for Cloud 1, but change the start positions of the cloud to x=20, and y=-20.
Since the clouds will appear after the toggle has reached its final position, the duration will be longer than the previous steps that have been set. Set the easing to “Spring”, tension to 300 and friction to 15. By inverting the previous values, the cloud will revert to the original position, x= -50 and y = 30.ĥ. Since the dark to light action is going to expose the clouds, the effect that is placed on them will be seen. Add the ‘Move’ condition to conditions 2. Since the clouds are moving behind the switch and will not be visible, a simple easing is all that is needed.Ĥ. Change the Easing to ‘Ease in & Out’ and choose ‘Cubic’ from the drop down box below.
This is just the start position of the cloud behind the toggle, as used our demo file. Select ‘cloud 1’ and add the ‘Move’ condition from the conditions 1 and set the position to ‘Move by’.Ģ.
0 kommentar(er)
