Recently, I have started working on animations for the landing page of the website. In fact, for the beginning, I have tried 2 options of possible motions.
In the first storyboard, you may see that the black and the beige rectangles are proportional to each other. They start moving at the same time from the bottom line to the top line. Simultaneously, the yellow polygon starts its way from the opposite point, moving from the right corner of top line to the left corner of bottom line. After all shapes reach their position on the page, the text is moving from the left side to the right, stoping in the centre.
In the second storyboard, the black and the beige rectangles are also proportional to each other. However, in comparison to the previous storyboard they start moving from theirs corners to the boundaries of yellow polygon. As for yellow polygon and the text’s appearance, it all the same.
Basically, there is no extremely visible difference between the first and the second animation, however I have found that the first version is more fluent since it seems less busy. What is more, in the first piece while the shapes are moving to construct the overall image there is a sense that movements are happening in order to open a path to the world of typography (like a gate) and this is exactly what I need. Moreover, I want to strengthen this feeling by making the reverse animation after a user clicks on The Font to move to the next page. However, the problem is that I am not sure how to do it. Hopefully, I can find some free widgets to use in Muse. But if it does not happen, I will search for other options, such as creating a code in Edge.