To create animations and other things for my project, I was able to create components as I had previously learned to do in the sustainable development goals project.
For the crew flip cards, I made each card a component and its variant was the back of the card so that when I prototyped it together, they could all individually flip over when clicked. I was able to create the “flipping” motion by flipping the variant card horizontally but still having the text turned back the normal way.
For this animation, the intention was the unveil one letter at a time from behind the “mask” so that after 200ms, the next letter would appear and so on until the full date was shown. I thought this was a good animation to have as I could use it more than once as I have 2 different date screens.
I also want to animate my illustrations so they actually do something, even when hovered over. I could also potentially animate the quote screens so that they will be a bit more interesting.
When prototyping my figure-8 idea on Figma, I realised that I couldn’t do a horizontal scroll through the frames as it would just scroll straight into nothing rather than following the flow of the loop.
Showing why horizontal scroll would not work
This then meant that I had to prototype the screens together differently. The only option that looked close to the horizontal scroll was ‘drag’ to move onto the next screen. I found that using this drag option meant that the white line with the coloured dot doesn’t flow smoothly from one screen to another the way I had hoped. Instead, it jumps around the screen a lot. I wasn’t really happy with how it was being prototyped together and I didn’t feel as though it was really doing my idea justice.
You can see an example of this in this screen recording: