![protopie dropdown protopie dropdown](https://cdn.sanity.io/images/qyzm5ged/production/e06cc6eff76ef380ebb5a39fc86e44e1451d56e0-1286x960.png)
Imagine just dragging out a checkbox or a custom button with a cool animation that’s all built-in no mess, no fuss rapid prototyping as it should be.Ĭomponents have flexible layouts, overrides, and can be nested infinitely enabling the creation of modular UI elements. You can create a set of components that can be dragged and dropped into a prototype and just work. Thanks to ProtoPie for sponsoring this ProtoBites series.ĭownload the final demo file from the ProtoPie cloud and try it out.Components give you a huge amount of power when you are creating prototypes. 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.ģ.
![protopie dropdown protopie dropdown](https://cdn-images-1.medium.com/max/1200/1*3LvQ7JxqxSVGdwnqL43fJA.png)
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 ⭐️ġ.
![protopie dropdown protopie dropdown](https://cdn.sanity.io/images/qyzm5ged/production/521e4331feb4d85c77a965c2b3bbfb91976cb767-2138x1200.png)
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.
![protopie dropdown protopie dropdown](https://cdn-images-1.medium.com/max/2000/1*BEFVlXOmO7cnAEaozLetQw.jpeg)
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’.Ģ.