ITKarma picture

Have you ever wanted to create a beautiful animated homepage for your site? And to present the flagship product in the best possible way with the help of elaborate animations? What about drawing user attention to menu links moving along an intricate path?


In order to fulfill such wishes, relevant for the modern world of web development, the CSS module Motion Path Module Level 1 allows you to use a completely new type of animation and allows you to move HTML elements along a given path.


Browser Support


Let's start with the unpleasant moments. We'll have to upset fans of Safari (OS X and iOS) and Internet Explorer (if any): the properties of the Motion Path module are not yet supported by all browsers .


However, at the time of this writing articles about 75% of visitors to your site have the opportunity to enjoy this modern technology.


Please note that this type of animation is just a nice addition. It is not necessary in terms of content perception and user experience with your web interfaces.

Data on support for the css-motion-paths feature across the major browsers from caniuse.com

Motion Path Module Properties


Three mechanisms are involved in the implementation of animations:


  • determination of the element trajectory (the CDMY0CDMY property is responsible for this),
  • determining the position of an element on the trajectory (property CDMY1CDMY)
  • and element orientation while moving (property CDMY2CDMY).

offset-path


This is the most significant property listed. It can take several values: CDMY3CDMY, CDMY4CDMY, CDMY5CDMY, CDMY6CDMY, CDMY7CDMY, CDMY8CDMY, and CDMY9CDMY.


Today, most browsers support only one value - CDMY10CDMY, so this article will focus on it.

The syntax of the CDMY11CDMY values ​​is borrowed from the SVG markup language . Therefore, to master the animations discussed in this article, you need basic SVG knowledge or experience with vector graphics editors.


You, of course, know that SVG is a vector image format that allows you to create basic graphic primitives, such as straight and curved lines, circles, arcs, etc. And the trajectory can be a combination of several similar figures.


Here is an example of a square path along which CDMY12CDMY will move.


div { offset-path: path('M10 10 H 180 V 180 H 10 Z');/* квадратная траектория */} 

The purpose of this article is not to study SVG, but to learn more about the syntax used here, you can read the wonderful translation CSS-Tricks articles on the la Cascade ( translation into Russian - approx. lane.) or detailed MDN manual .

offset-distance


As for the CDMY13CDMY property, it determines the position of an element on a given path. Its value can be expressed in any standard units (pixels, rem, percent, etc.). The property is of particular interest when you want to implement an animation of an object moving along a specific path.


div { animation: move 1s;/* анимация "move" будет длиться 1s */} @keyframes move { 0% { offset-distance: 0%;/* стартуем в начале траектории */} 100% { offset-distance: 100%;/* и прекращаем движение в конце траектории */} } 

Watch the demo on CodePen:



ITKarma picture

offset-rotate


And finally, the third property of the module, CDMY14CDMY, which determines the orientation of the object on curved sections of the path.


Accepted Values:


  • CDMY15CDMY (default value): the orientation of the object coincides with the direction of the portion of the path on which it is located. Most often this value is required.
  • CDMY16CDMY: the object will also change orientation depending on the direction, but it will be rotated 180 ° around its axis, that is, it will move backwards all the time.
  • CDMY17CDMY (or CDMY18CDMY): the orientation of the object will deviate from the movement curve by the angle X.

Watch the demo:



ITKarma picture

Path visualization


You, of course, noticed that the trajectory of the object is not displayed on the monitor, and this is not good, especially since such an option, apparently, is not provided for by the specification.


To make up for the lack of this feature in the module, you will have to use another tool. We will resort to the help of SVG to “draw” the trajectory, and then lay it on the path of movement.


path () or gone


Recall the square path along which CDMY19CDMY moves:


div { offset-path: path('M10 10 H 180 V 180 H 10 Z');/* квадратная траектория */} 

Our task is to accurately reproduce the same path in SVG, because only in this way will it become visible.


In the SVG markup language, the path can be drawn using the CDMY20CDMY element with a nested CDMY21CDMY, which in turn has the CDMY22CDMY attribute


Thus, in SVG we get the following code:


<svg...> <path d="M10 10 H 180 V 180 H 10 Z" fill="none" stroke="gray"/> </svg> 

Note that most SVG attribute values ​​are changed using CSS, so you can shorten the code:


<svg class="svg-path" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 180 V 180 H 10 Z"> </svg> 

And in the stylesheet there will be the following:


.svg-path { stroke: gray; stroke-width: 4; fill: none; } 

Overlay the visible path onto the path


At the second stage, it is necessary to position all the necessary elements relative to each other. Namely, we will need:


  • some CSS to display the path using CDMY23CDMY (we already did this)
  • an object moving along its path using the CDMY24CDMY property (this is also ready),
  • a wrapper container relative to which you can position elements with CDMY25CDMY.

And specifically, we need the following code:


<div class="motion-container"> <svg class="svg-path"> <path> </svg> <div class="motion-object"></div> </div> 

And, accordingly, such CSS:


/* обертка для.svg-path */.motion-container { position: relative; }.svg-path { position: absolute; left: 0; top: 0; } 


ITKarma picture

Complicating animations


It’s suggested that after reading this short tutorial, you can already create advanced CSS animations.


The only thing that can limit you in this is your imagination. And, of course, the desire to draw SVG.Various SVG editors will help you with the latter. For example, Sketch or Inkscape can make life easier.


Also, the online SVG editor Method Draw will do just fine with this task.


I suggest watching a video that shows how you can use in practice the tools discussed in this article.



Watch the demo on CodePen:



ITKarma picture

And a little bit to the issue of web content accessibility


You might have doubts about the animations that play, even though this browser setting is not enabled, or, worse, intentionally turned off by the user. This can be a problem for visitors.


Consider existing approaches to this issue.


  1. According to one of the standards RGAA 4 the duration of the animation should not exceed five seconds, or you must provide the opportunity to enable animation and put it on pause or expand/collapse the block with the content. Otherwise, the content should be motionless. (For WC3 standards for web accessibility, see the following overview and his translation . - Approx.)
  2. Media query CDMY26CDMY allows you to take into account the preferences of users in the issue of animations, taking into account individual settings.

A few demos and conclusion


To make you want to experiment with the Motion Path module, I prepared a selection of demos on CodePen that I did best:



I hope that you will want to try this new approach to CSS animations yourself, study them more deeply and someday use them in the production version of your site.


Please share your comments on the topic of the article or favorite examples from the Internet in the comments.

.

Source