Start off by drawing three in three separate frames. Name each frame “notification”. Then add a frame the size of a phone which will serve as our background and give it the name “home”.

Your design should look something like this

Switch to code view and write:

notificationList = Layer.selectAll(“notification”)

This will create an array with all layers named notification. Whenever you add a new layer with the name “notification”, it will automatically get added to this list. This is a way to make your a bit more dynamic and avoid having to go back and fourth between code/design to target each layer individually.

Now we want to rearrange all notifications on the home screen and add the 3D styled group.

Start off by looping through all the layers and use .props to change the properties of each layer in the loop:

notificationList.forEach (notification, i) ->
notification.props =
parent: home
y: i * () + 220
scale: 1 - (i * 0.05)
  notification.index = notificationList.length-i

We switch the parent and position to get the notifications inside the home layer. The 3D effect is created by multiplying the current iteration (i) with a scale factor. The layers will however show up in the wrong order. This is fixed by tweaking the index at the end of the loop.

Now, let’s define the state of the layers while expanded. Still inside the loop, add:

notification.states.expanded = 
y: (notification.height + 8 ) * i + 250
scale: 1

notification.states.animationOptions =
curve: Spring(tension: 200, friction: 22)
time: 1.2

Again, we use the current iteration (i) to make each layer shift its position a bit. We also reset the scale to 1 on all layers and tweak the animationOptions to get the spring animation right.

Last but not least, add the click event to make the state change:

notification.onClick ->
notificationList.forEach (notification, i) ->

When you click a individual notification, we’ll loop through all notifications in the notificationList and have them all do a state change. This means that we can both click a notification to open it and to close it. Since the notificationList is generated using selectors, try adding a few more “notification” layers in Design and notice how the code scales nicely!

Now you’ve got the basics down and it should look something like this:

Curious to learn more? Check out and see if you can get the last details right yourself!

Good luck and happy prototyping!

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here