demo

I prefer to call this kind of animation path-following animation or trajectory animation. As you can see, an element (object) moves along a specific path (trajectory).

The principle of

CSS properties

If you want to move an element along a path in CSS, the core attributes you use are offset-path and offset-distance.

Offset-path the offset-path attribute takes a path that specifies the path of the element.

The offset-distance attribute declares how far the element travels along the path. Usually 100% indicates the total length of a path.

This is very similar to the SVG stroke animation principle described in the previous section, even though the core attributes use the same keyword offset

Offset-path is called motion-path, and all motion-related attributes are offset-*

Codepen. IO/xiaoluobodi…

SVG SMIL animation

SVG SMIL Animation defines a simpler way to animate paths, using the animateMotion element. You can also define a path that specifies the path of an element’s movement.

Codepen. IO/xiaoluobodi…

In actual combat

Below we use GreenSock to realize the path animation of rocket 🚀 moving along the path. GreenSock uses MotionPathPlugin to realize the path animation, which supports any Dom, SVG, Canvas and other elements to move

Prepare vector files

We need to prepare two vector files:

  • Rocket 🚀 : Elements that require movement
  • Path: The trajectory of a rocket

Rockets can be found at OpenMoji or Icons8:

The path is relatively simple. Draw a path in Sketch and copy the path code

<path d="M254.176965,724.703501 C344.518264,740.446962 426.933366,723.447117 501.422273,673.703966 C613.155634,599.08924 556.372552,480.989479 673.298424,465.529966 C790.224296,450.070453 833.25236,631.21486 973.972003,584.009185 C1067.7851, 552.538735, 1124.45691, 434.26844, 1143.98743, 229.1983" id="rocket-path"></path>
Copy the code

To register the plugin

To use the MotionPathPlugin, you need to register the plugin

// register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin);
Copy the code

move

// Specify the element to move
gsap.to("#rocket", {
  duration: 3.3.repeat: -1.ease: Linear.easeNone,
  motionPath: {path: "#rocket-path".// Follow the trajectory
    align: "#rocket-path".autoRotate: true.alignOrigin: [0.5.0.5]}});Copy the code

Codepen. IO/xiaoluobodi…

reference

  • MDN offset-path
  • css-tricks offset-path
  • animateMotion
  • GreenSock MotionPathPlugin

about

This is the sixth chapter of the SVG animation development series.

Version of the Notion

The litany was written on Notion, so I’ve kept a shared version of Notion, which you can also view here.

Making version

The brochure offers a GitHub version of the online reading experience, Portal

Wechat official account version

Follow my technical official number, also can find this booklet series, currently in the update…