[ProtoBites Part 6: ProtoPie]
Adding the finishing touches to the toggle is what is going to give it the extra uniqueness. For this section, each cloud will be referred to by a number (i.e. cloud 1, cloud 2 and cloud 3).
Cloud 1 ☁️
1. Select ‘cloud 1’ and add the ‘Move’ condition from the conditions 1 and set the position to ‘Move by’.
2. Enter the values x = 50 and y = -30. This is just the start position of the cloud behind the toggle, as used our demo file. Try your own out.
3. Change the Easing to ‘Ease in & Out’ and choose ‘Cubic’ from the drop down box below. Since the clouds are moving behind the switch and will not be visible, a simple easing is all that is needed.
4. Add the ‘Move’ condition to conditions 2. Since the dark to light action is going to expose the clouds, the effect that is placed on them will be seen. By inverting the previous values, the cloud will revert to the original position, x= -50 and y = 30.
5. Set the easing to “Spring”, tension to 300 and friction to 15. 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 duration 0.8.
Letter
Cloud 2 ☁️☁️
Follow the steps for Cloud 1, but change the start positions of the cloud to x=20, and y=-20. Varying the duration can create different effects such as the illusion of separation between the previous cloud 1.
Cloud 3 ☁️☁️☁️
For the 3rd cloud, a different easing can been used to give a pulling effect on the previous clouds. In order to do this, change the easing to ‘Ease In & Out’ with ‘Cubic’.
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. The duration is 0.2. Here’s some of those settings, and see the video for more detail:
Moving the Stars
In our final part, we will move the stars! The process is very similar to moving the clouds. In this segment, each star will be referred to by a number (i.e star 1, star 2 and star 3).
Animating the stars is pretty much the same as moving the clouds above. It’s all quite experimental and depends on the type of motion you want to get. Here’s exactly the inputs I used in ours:
Star 1 ⭐️
1. With star 1 selected, add the ‘Move’ condition to conditions 1 and select the ‘Move By’ with x = 85 and y = 8. Set the easing to ‘Spring’ and the tension at 300 and the friction to 15.
2. Change the duration to 0.8 and the start delay to 0.51.
3. Underneath conditions 2, add a new ‘Move’ condition with position set to ‘Move By’ and x = -85 and y = -8. Choose the ‘Ease In & Out’ easing and set to’ Cubic’, with a duration of 0.2.
Star 2 ⭐️⭐️
1. Follow the above steps, but set x = 70 and y = -62. The tension and friction are the same values.
2. Set the duration to 0.8 and the start delay to 0.55.
3. Follow step 3 of Star 1, but use x = -70 and y = 62.
Star 3 ⭐️⭐️⭐️
1. Follow the steps above, but set the start position of this star to x = 24 and y = -38. Set the duration to 0.8, and the start delay to around 0.5.
2. For the Move condition, set the position of the star to x=-24 and y=38
Congratulations! We have made the light to dark mode toggle with some cool illusions. 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. There are lots of conditions that can be added to create more complex interactions. The possibilities are endless and I can’t wait to see what everyone comes up with!
Thanks to ProtoPie for sponsoring this ProtoBites series.
Download the final demo file from the ProtoPie cloud and try it out.
