Today I will make and animation of the bottom panel.

1. DRAG TRIGGER

At first I make the panel with icons response to dragging.

  1. Click Trigger/Drag:

. Choose panel with icons from combobox:

2. MOVE RESPONSE

Next I set the movement range of the panel with icons.

  1. Add Move by clicking the Plus Icon under the Drag Trigger.
  2. Choose panel with icons from combobox and set Direction to Vertical, Limit to Custom Limit and the range of the movement. In our case MinY = 356, MaxY = 827.

3. AND OPACITY RESPONSE

Next I want to darken the background and change link icon to arrow when I move panel up.

  1. Add Chain trigger:

2. Set Opacity of black background to 0% when panel is down and to 70% when panel is up:

3. Set opacity of arrow to 0% when panel is down and to 100% when panel is up:

4. Set opacity of link to 0% when panel is up and to 100% when panel is down:

4. TAP TRIGGER &

Finally I want the panel to move up & down on tap. For this I need to create Condition — when panel is down, move the panel up and vice versa.

  1. Add Tap trigger to panel with icons:

2. Add the first Condition: when panel with icons is down, move panel with icons up, hide link icon and show arrow icon and black background.

When panel with icons is down…
…move panel with icons up…
…hide link icon…
…show arrow icon…
…show black background.

3. Add second Condition: when panel with icons is up, move panel with icons down, show link icon and hide arrow icon and black background.

When panel with icons is up…
…move panel with icons down…
…show link icon…
…hide arrow icon…
…hide black background.

Resources

Animation Start

Animation Complete



Source link https://blog.prototypr.io/--2-drag-chain-tap-conditions-4d53de451ddb?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here