Modern animation technologies in web design

Dadianova Irina PhD in Sociology Associate Professor, Department of Information Technology and Computer Design, St. Petersburg State University of Culture 191028, Russia, g. Sankt Peterburg, ul. Mokhovaya, 14, kv. 32 newspaper2004@yandex.ru Other publications by this author

At the current stage of social development, animation has firmly taken its place in modern visual culture and has become widespread in various fields of activity – advertising, business, education. Popov E.A. asserts that "the expansion of computer technologies into the field of culture and art at the turn of the XX and XXI centuries contributed to the transition of animation to a new, larger-scale and qualitative level, requiring analytical study of new types of animation works and their interaction with previously formed ones." ^{[8, p.21]}

The term "animation" comes from the Latin "anima" – soul. Animation translates from French as "animation". Animation is understood as "a kind of spatio-temporal art, an artistic image based on animating any objects by attributing motion to them." ^{[12, p.70]} Animation can also be defined as "a type of artistic creativity belonging to the category of audiovisual arts, the distinctive feature of which is the "revival", the endowment of the "soul" of the image created artificially, through a variety of techniques and means of expression." ^{[8, p.42]}

The rapid development of computer technology has made it possible to simplify the creation of animation and expanded the boundaries of its application. Various forms of animation are used in design, on television, on the Internet.

The subject of this study is web animation used in the interfaces of modern web applications, its functions in the process of interaction between the user and Internet resources, forms and technologies for creating animation effects. The research used general logical research methods (analysis and synthesis, deduction and induction), methods of systematization of scientific knowledge – typologization and classification. The scientific novelty of the research lies in the consideration of the current trends in the evolution of the role of animation in modern web design, as well as in the systematization of modern technologies for creating web animation.  The practical application of the results is realized within the framework of teaching by the author of the university disciplines "Web Design", "Multimedia technologies", "Animation design" for students of the "Design" training direction.

There are two directions of animation development – non-commercial (author's) and commercial. The author's animation is engaged in the search for new artistic values, new expressive forms and means to express the creative idea of the creator. Commercial or mass animation, intended for a wide range of viewers, has as its main goal the promotion of goods and services and the conquest of commercial markets.

Animation also plays a significant role on the Internet and can be presented in various forms - both in the form of separate animated videos and as components of websites. Animation integrated into the website helps to attract attention to a certain point on the page and push the user to action. An animated object forces the user to react to it and perform some action. Animation also makes it possible to demonstrate any goods or services in more detail, with details, from interesting angles and with illustrations. ^{[6, p.267]}

At the moment, one of the most popular areas of web design is the field of interface development, since a well-designed interface allows you to make user interaction with a website more efficient and comfortable. ^{[11, p.342]}

Not so long ago, Adobe Flash technology was dominant in the field of web animation, but it usually implemented entertainment and advertising functions, since flash technology was mainly used to develop promo sites, games and animated banners. With the advent of HTML5 technologies combined with CSS3, animated objects have become an integral part of an effective interface. Interface animation includes various changes in the characteristics of an object – its size, position in space, transparency, color, shape, and so on. – in response to a user action or a programmed event. ^{[9, p.342]}

Let's look at the main functions of animation of objects integrated into the interface of a website or application:

- imitation of the real world. Transferring the characteristics of real objects to the interface elements brings the interface closer to the user, makes the use of the site more psychologically comfortable.

- contextual or binding. Animation helps the user to realize what processes are being implemented in the interface at the moment. Contextual animation is implemented in various interface elements – pop-ups and notifications, loading indicators (preloaders), smooth transitions between pages.

- stylistic. From an artistic point of view, creating a unique visual image based on animation sets the website apart from the rest, helps to build up from competitors. ^{[1, p. 58]}

The appearance of animation effects can be brought to the following classification:

- animation when scrolling the page, alternate appearance of new elements. The scroll bar acts as a timeline;

- the animation of the layout change consists in the dynamic movement of page elements when the window is resized;

- animation of layers. Layers superimposed on each other, each layer has a separate animation;

- micro-animation. Minor changes to the interface elements that prompt action (button, link, checkbox).

The competent use of different types of animation creates a comfortable space for the user to work on a website or application. However, an excessive amount of animation and animated elements, an overloaded web page structure leads to a decrease in the speed of working with the website. Animation effects are not supported by all browser versions.

The introduction of animation is an important part of the process of developing the interface of a website or application. Reasonable use of animated elements increases the level of attractiveness and comfort of user interaction with a website or application. ^{[3, p. 113]}

Animation is usually associated with animation or video creation. However, animation has also become widespread in the web development environment. Modern websites use various types of animations that allow you to attract the user's attention, place accents and make the use of the site more comfortable and attractive.

Figure 1 is an animated illustration showing the differences between the two fonts from a landing page dedicated to the Baskerville font (here and further, the works of students of the Department of Information Technology and Computer Design of St. Petersburg State University are used for illustrations).

Various types of animation can be used on the Internet, but the most popular are animated interface elements that reveal the purpose and functionality of the user interface more effectively than static text. ^{[10, p.421]} Animation also allows you to focus the user's attention and direct his actions in the right direction. There are special requirements for high-quality interface animation: it should be functional, well-developed and not irritate the user with an overly active design.

The next important type of web animation is the waiting animation, which is a response to the user's need to know that the process is running and at the moment you need to wait without performing any actions. Waiting animations are implemented in the form of preloaders (loaders) with a wide variety of designs consistent with the overall visual concept of the site.

Also, recently, the so-called narrative animation (storytelling) has become increasingly popular, which consistently tells a story, leading the user along. Such animations can tell about the site itself and its history, product or service. A suitable illustration would be a website demonstrating the process of assembling a new product or implementing a process in front of the user.

Figure 2 is a fragment of an animated webcomic dedicated to the advantages of using a bicycle in urban conditions.

Finally, we note that a large share of the Internet services market is occupied by animation created for advertising purposes. Advertising animation often consists of short video clips that vividly, clearly and quickly convey information so that it makes the maximum impression and is deposited in the minds of potential buyers. Advertising animation can describe the essence of a brand, broadcast information about a product or service, and motivate to buy.

Figure 3 – Design of the main page of an advertising site using animation.

At the moment, web animation is a full-fledged part of the website design and is designed to improve the usability of the site. Let's consider what advantages the use of animation on the site brings. Firstly, animation helps to place accents and attracts visitors to important details. So, with the help of animation, you can highlight the main information on a web page, draw attention to the goods that need to be sold first, and indicate information about available discounts. Animation can also make site navigation more understandable and accessible. Secondly, animation is used to express emotions (for example, expressing approval when the user performs the right action, and vice versa). Thirdly, animation is able to reflect the physical characteristics of the object. Fourth, animation creates motivation to perform targeted actions (for example, animation accompaniment of all user registration steps).

As for the technologies for creating web animation, at the moment they are quite diverse. The leading position is occupied by technologies of cascading style sheets of the third generation (CSS 3.0) and the JavaScript web programming language.

Cascading style sheets of the third generation make it possible to create animations and animated transitions between different states of objects using keyframes. The main advantages of CSS animations are the absence of the need to connect external visual effects libraries and high performance. However, CSS cannot reproduce complex physical characteristics and simulate realistic movement. There is also a limit on the number of animations played in a row. ^{[5, p. 379]}

Composite animations are best developed using the JavaScript web programming language, which provides a wider range of features. JavaScript has its own functionality for animation development, however, external additional libraries (for example, jQuery) are most often used. In this case, it should be borne in mind that the performance of the site will depend on the library selected and on the complexity of the programmed animation. Thus, JavaScript animations provide more opportunities in creating advanced animations than CSS. ^{[9, p. 269]}

The next technology for creating web animations that is gaining popularity is (scalable vector graphics). SVG is a vector graphics format that allows you to scale SVG images and animations without loss of quality. You can animate SVG elements using CSS and JavaScript, as well as using your own programming language called SMIL. ^{[10, p.221]}

To create complex animation effects, including three-dimensional animation and virtual reality effects, the WebGL web graphics library is often used. The web graphics library allows you to create animations with a frame rate of 69 frames per second, which makes it possible to create high-quality animation effects of a high level.

As for the various tools for creating web animations, they are mostly represented by various external libraries, such as GreenSock (GSAP), ScrollMagic, Velocity.js, Mo.js, Anime.js and others. A powerful tool for developing three-dimensional animations is the library Three.js . Adobe After Effects is also often used to create and render web animations.

There are also software tools that allow you to animate elements of web pages without programming knowledge. A variety of website designers, such as Readymag and Webflow, make it possible to create a website and animate its elements using an intuitive interface.

Being a popular website builder, Readymag allows you to animate elements of a website, apply basic animation effects (scaling, changing transparency, moving, rotating), adjust the animation time and speed, scroll sequence, binding to events. Webflow is a constructor that allows you to create complex multi–pass animations without writing code. ^{[2, p.174]}

Thus, it can be concluded that in recent years web animation has undergone significant changes in terms of its role in web design, changing its main function from entertainment to managing user interaction with a web resource. It should also be noted that there has been a paradigm shift in the development of web animation - a whole pool of fundamentally new technologies and tools has appeared, which has made it possible to raise web animation to a new level of development, requiring rethinking and a new systematic approach to the study and teaching of web design.