When you go down to refresh, you have to load data, and Principle does that too.

The final chapter of the Principle tutorial series teaches you how to do a “drop down trigger Loading of data” effect.

Later have fun effect, follow fate update.



Results the following


First take a look at my effect last night and the content of Principle:


There is an interesting point in this content: except for the left and right pictures, the middle pictures (pictures 2-8) are the same except that the Loading ball is in a different position up and down.


And these two to eight are there for that ball to bounce up and down.


Note: SO I don’t really recommend using Principle for overly elaborate interactions.


The tutorial begins


Some of these effects have been covered in previous articles and will not be repeated.


First, pull down linkage


When the list is pulled down, the “blank blocks” slide down at the same time. To make the slide more comfortable, I set the parameter: the list is pulled down by 100, and the blank blocks move down by 70.


The “blank” should be behind the top bar, but I put it on top for clarity.


And when the list slides, the ball doesn’t move.



Second, drop down to enter the ready loading state


There is an effect that is used here: Scroll Released.


The second page is copied from the first page, and when the copy is complete, adjust the location of the content.


1. The block in the list moves down a certain distance. (Not the whole group, but the blocks within the group. Blue is the position of the sliding group, the block has moved down some distance relative to the group.


2. Slide the blank block and the ball to the specified position.

3. Click the lightning button on the first page to activate the “Scroll Released” effect to connect to the second page. (And then it works.)




Three, the ball bouncing animation


Make six copies of the second page. Then adjust the position of the balls as shown below, with one on top and one on the bottom.


Go ahead and apply the Auto effect to the panel, which will automatically jump to the next page after jumping to this page.


By the way, the ball changes up and down. In order to make it more like a bouncing effect, it needs to adjust its dynamic effect curve.


The curve I used: on the left is the curve as the ball goes from small to high (from fast to slow); On the right is the top to bottom curve of the ball (from slow to fast);


Restore the movement of objects in our real life.


Load new modules


Take the last Loading effect module, copy another page, then copy a card in the list below, remove the original “white block”, name the new copied card “White block” (the two blocks selected in the picture have the same name), and adjust the position.


What about the little green ball?

The little green ball is still in the picture, but its transparency has gone to 0.


Same effect as Auto.


OK, that’s it for the whole effect.


If you encounter any problems during the process, you can add me on wechat: Tianlan1025


This is the conclusion of the Principle tutorial series, and I will write some serious product design content.


The above




Series of articles:

Principle as a Productivity Tool (part 1)

Make Principle a productivity tool (2) Linkage in single pages

3. Make Principle a Productivity Tool

4. Make Principle a productivity tool