The next animation came from trying to design some simple animations to express features of Narafy Notes. One feature that needed to be demoed was around what we called stacks (a bit like tags/labels) and how you could combine them to filters your note space to a specific context. I chose to rather than just record interactions on the app which could be overwhelming, to just make an animation to demonstrate this feature and the point we were trying to make in its simplest form.
The first step with this animation was to try and prototype it in Figma using a story board.
The concept was simple enough. Start with a could of stack and showing how these could be combined and switched out to change the context.
Using Figma it is easy to then link these together in a prototype triggered by delays
Screen Recording 2024-02-03 at 13.54.48.mov
Adding background colours that change to match the stack colour made it pop a bit more
Screen Recording 2024-02-03 at 13.57.57.mov
After making this in Figma, I decided to make in After Effects so this could be implemented on the website and also potentially within our desktop applications for a walkthrough introducing features.
The first step to make this in after effects was to recreate all of the assets within Adobe Illustrator to make them easy to organise within After Effects. This also ensures all of the shapes are maintained correctly.
