Like with the stack animation, another feature to showcase was our spaces feature. The story I wanted to tell here is that combinations of stacks allow you to create spaces change to fit the stack combinations and new notes inherit the stacks of the space you’re in, allowing you quickly organise the notes you’re making.

Creating the narrative took a bit more planning, I had multiple scenes I wanted to link together, each scene was planned independently in Figma before it was all put together.

Scene 1 - Changing the stacks change the notes in the space

Screen Recording 2024-02-03 at 15.06.40.mov

Scene 2 - Making notes in a space attaches the stacks in the space to the new note

Screen Recording 2024-02-03 at 15.24.15.mov

Scene 3 - You can add more stacks to notes in the space to give it more context + typing animation

Screen Recording 2024-02-03 at 15.26.10.mov

For this prototype you can see that Figma is a little more complex for some of the typing animations that need a lot of moving parts (Still worth prototyping first):

Similar to the Stack Feature animation. I just of all remade all of the assets in Illustrator

Unlike the Stack features animation I chose to put a lot more of the animation directly into the main comp. Only making comps for specific interactions that do not touch other items. Such as the typing animation

None of the animation is breaking any new ground with effects it’s just a lot of assets moving around at different timestamps. The typing is done by simply showing in square rectangles at different intervals to mimic a typing cadence.

Screen Recording 2024-02-03 at 15.37.59.mov

Screen Recording 2024-02-03 at 15.42.17.mov

In summary this animation is quite long and has a lot of moving parts, but it turned out well. It was well planned out which made the creating pretty straight forward. Timings are worked out at each stage so there wasn’t a lot of fiddling about after the fact.