Recently I started using Protopie for creating advanced animations. It’s a great tool and it takes not much time to learn the basics. The great advantage of is that you don’t have to code, every interaction is clickable.

My first is about animating by Using A Focal Element:

Thumbnail

The tutorial contains 5 main parts:

  1. Tap Trigger,
  2. Scale Response,
  3. Move Response,
  4. Opacity Response and
  5. Timing.

. TAP TRIGGER

At first I make the thumbnail image response to a tap.

  1. Click Trigger/Tap:

2. Choose thumbnail from combobox:

IMPORTANT SETTING: You have to check Allow Touch to affect lower layers checkbox in thumbnail text layer. Otherwise the area below the text layer will not be clickable.

2. SCALE RESPONSE

Next I make the thumbnail scale to the entire screen.

  1. Add Scale by clicking the Plus Icon under the Tap Trigger:

2. Choose square from combobox and set Size to current device size — 375×667 pt:

3. Set the square origin to upper left corner:

Scale Animation (×0.1 speed)

3. MOVE RESPONSE

To see the whole scaled thumbnail I move it to the upper left corner of the screen.

  1. Add Move by clicking the Plus Icon under the Tap Trigger:

2. Choose square from combobox and set Move to x: 0, y: -333:

Move Animation (×0.1 speed)

TIP: How to know what position of x and y you should set? Just move the square to the position you want to be after the movement and see the values in position label:

Let’s repeat the same steps for image:

  1. Add Move Response by clicking the Plus Icon under the Tap Trigger.

2. Choose image from combobox and set Move to x: 0, y: -333. Don’t forget to set the origin of the image to upper left corner (for more details see the third point of SCALE RESPONSE section).

Move & Scale Animation (×0.1 speed)

4. OPACITY RESPONSE

Next I hide the thumbnail text and make the content of the detail page visible.

  1. Set Opacity of thumbnail text to 0%:

2. Set Opacity of the status bar, back icon, header and text to 100%:

Opacity Animation (×0.1 speed)

5. TIMING

In the last step I adjust the animation timing.

  1. Set Duration of the Scale and Move Responses to 0.4:

2. Set Duration of the thumbnail text Opacity to 0.2:

3. Set Duration of the status bar, back icon, header and text opacity to 0.4 and Start Delay to 0.2:

Timing (×0.1 speed)

The steps for reverse animation are very similar.

1. TAP TRIGGER

I make the back icon response to a tap.

  1. Click Trigger/Tap.
  2. Choose back icon from combobox:

2. SCALE RESPONSE

I want the thumbnail to scale back to the original size.

  1. Add Scale Response by clicking the Add Responses icon under the Tap Trigger.

2. Choose square from combobox and set Size to it’s original size — 160×160 pt:

3. MOVE RESPONSE

Move thumbnail back to the original position.

  1. Add Move Response by clicking the Add Responses icon under the Tap Trigger.
  2. Choose square from combobox and set Move to x: 197, y: 25.82(original position).
  3. Choose image from combobox and set Move to x: -79.18, y: -33.18(original position).

4. OPACITY RESPONSE

  1. Set Opacity of status bar, back icon, header and text to 0%.
  2. Set Opacity of thumbnail text to 100%.

5. TIMING

  1. Set Duration of the Scale and Move Responses to 0.4.
  2. Set Duration of the status bar, back icon, header and text Opacity to 0.1.
  3. Set Duration and Start Delay of the thumbnail text Opacity to 0.2.
Reverse Animation (×0.1 speed)

And that’s all.:) You can experiment with all the values — especially with timing — according to your needs.

Final Animation

Resources

Thumbnail Animation Start

Thumbnail Animation Complete



Source link https://blog..io/protopie-tutorial-1-thumbnail-animation-ff378974e07d?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here