Scaling and Opacity Transitions in ProtoPie

[ProtoBites: Part 3]

Continuing from the last bite, we’re now going to make use of scale and opacity. One of the effects we want to give in our toggle animation is the sun spinning into the moon and vice versa on the reverse. In order to do this, we will need to change the scale of the sun.

This image has an empty alt attribute; its file name is image_preview-1024x48.png

Scaling the Sun

1. As before, ensure the Sun (sol) is selected and add a new ‘Scale’ condition underneath conditions 1.

2. On the forward action, we want our sun to decrease in size. For this, select the ‘Scale By’ on the size drop-down box. Change the width to -40 and the height to -40. Change the duration to 0.17 (or anything you want).

3. For the reverse we are going to want our sun to increase in size as it is going from dark mode to light mode. Again, create a new ‘Scale Condition’, this time underneath conditions 2. Set the size drop-down box to ‘Scale By’ and the width and height to 40. This time, I set the duration to 0.11.

This image has an empty alt attribute; its file name is image_preview-1024x48.png

The Sun’s Opacity

From creating simple events and combining them, we have been able to create a unique animation. In this step, we are going to make the sun disappear and reappear. This is so we can see the moon in dark mode.

1. Ensure the Sun (Sol) is selected, as the same as before! Add a new ‘Opacity’ condition underneath conditions 1. Set the opacity to 0. Remember, we want the Sun to disappear when moving to the right.

2. On the reverse, we want the sun to reappear. Underneath conditions 2, create a new ‘Opacity’ condition and set the opacity to 100. We would like our Sun to appear quicker than it disappeared because it is scaling up. Set the duration to 0.06.

3. Add a ‘Start Delay’ of 0.1. We do not want out Sun to become moulded together with the moon, instead, we want the Moon to look like it is spinning into the Sun. This is why we have added a start delay.

This image has an empty alt attribute; its file name is image_preview-1024x48.png

That’s the last of the Sun’s animations! Give yourself a pat on the back if you made it that far. You are already beginning to see the possibilities of creating spectacular micro-interactions with Protopie that your users are going to love!

This image has an empty alt attribute; its file name is image-3-1024x374.png

Thanks to ProtoPie for sponsoring this ProtoBites series.
Download the final demo file from the ProtoPie cloud and try it out.

👈Go Back to Part 2

Read Part 4 👉

Featured articles on Prototypr: