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.

Storyboard 1:

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.

Storyboard 2:

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.

Conclusion:

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s