Creating dynamic SVG animations through CSS instead of relying on the <animateMotion> tag offer greater flexibility and control

Question

Creating dynamic SVG animations through CSS instead of relying on the <animateMotion> tag offer greater flexibility and control

I am attempting to position an arrow at the midpoint of a bezier curve. The method outlined in this StackOverflow question, which involves using <animateMotion> to move a <path> representing the arrow and freezing it at the center of the curve, only works in Firefox. Due to the frequent changes in my curve's points, I prefer not to use marker-mid as recalculating the midpoint each time is costly for me.

<svg viewBox="0 0 500 500">
<g>
    <path id="path1" d="M291.698 268.340 C321.698 268.340, 411.904 93.133 441.904 93.133"></path>
    <path class="path_arrow" d="M0,0 L6,6 L0,12" transform="translate(-3,-6)">
        <animateMotion dur="0s" rotate="auto" fill="freeze" keyTimes="0;1" keyPoints="0.5;0.5">
            <mpath xlink:href="#path1"></mpath>
        </animateMotion>
    </path> 
</g>
<g transform="translate(166.698,243.340)">
    <circle r="5" class="p1"></circle>
</g>
<g transform="translate(441.904,68.133)" >
    <circle r="5" class="p2"></circle>
</g>
</svg>

Is there a way to achieve this using CSS Animations instead of relying on <animateMotion> ?

EDIT 1:

The endpoints of the curve are draggable, causing the curve's points to frequently change. The goal is to animate the arrow to the center of the curve without manually calculating the midpoints.

EDIT 2:

Following Kaiido's suggestion, I added calcMode="linear" resulting in the arrow being correctly positioned along the path. However, when repositioning the endpoint by dragging, the arrow remains in its original position in Chrome instead of moving along with the parent path. This behavior is consistent with Firefox but not Chrome.

css animation svg

Answer 1

Answer №1

If you want to achieve the same result using CSS, you can make use of the offset-path, offset-distance, and offset-rotate properties:

#path1 {
  fill: none;
  stroke: black;
}
.path_arrow {
  transform: translate( -3px, -6px );
  offset-path: path("M220 104C220 144,400 180,400 224");
  offset-rotate: auto;
  offset-distance: 50%;
}
body { background: white; }

<svg width="500" height="500" >
  <path id="path1" d="M 220 104 C 220 144 400 180 400 224"
        fill="none" stroke-width="2" stroke="black" />
  <path class="path_arrow" d="M0,0 L0,12 L12,6 z" />
</svg>

However, it's important to note that the browser support for these CSS properties is lower compared to SVG SMIL, as indicated by their browser support.

In case you need IE support, there is a JavaScript implementation available at this link, which appears to support <animateMotion> and rotate. Please keep in mind that this implementation hasn't been personally tested.

In reference to "EDIT 2" in the question:

It seems that Chrome requires an explicit call to update the <mpath>. This can be achieved by invoking the beginElement() method of the <animationMotion> element after each update:

document.querySelector('svg').onmousemove = function(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  path1.setAttribute( 'd', `M ${x} ${y} C 220 144 400 180 400 224` );
  // Chrome requires an explicit update
  document.querySelector('animateMotion').beginElement();
}

<pre style="position: absolute; pointer-events:none">Move your mouse to change the path</pre>
<svg width="500" height="500">
  <path id="path1" d="M 220 104 C 220 144 400 180 400 224"
        fill="none" stroke-width="2" stroke="black" />
  <path d="M0,0 L0,12 L12,6 z" transform="translate(-3,-6)">
    <animateMotion dur="0s" rotate="auto" fill="freeze"
                   keyTimes="0;1" keyPoints="0.5;0.5" calcMode="linear" >
       <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

Answer 2

If you want to achieve the same result using CSS, you can make use of the offset-path, offset-distance, and offset-rotate properties:

#path1 {
  fill: none;
  stroke: black;
}
.path_arrow {
  transform: translate( -3px, -6px );
  offset-path: path("M220 104C220 144,400 180,400 224");
  offset-rotate: auto;
  offset-distance: 50%;
}
body { background: white; }

<svg width="500" height="500" >
  <path id="path1" d="M 220 104 C 220 144 400 180 400 224"
        fill="none" stroke-width="2" stroke="black" />
  <path class="path_arrow" d="M0,0 L0,12 L12,6 z" />
</svg>

However, it's important to note that the browser support for these CSS properties is lower compared to SVG SMIL, as indicated by their browser support.

In case you need IE support, there is a JavaScript implementation available at this link, which appears to support <animateMotion> and rotate. Please keep in mind that this implementation hasn't been personally tested.

In reference to "EDIT 2" in the question:

It seems that Chrome requires an explicit call to update the <mpath>. This can be achieved by invoking the beginElement() method of the <animationMotion> element after each update:

document.querySelector('svg').onmousemove = function(e) {
  const rect = this.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  path1.setAttribute( 'd', `M ${x} ${y} C 220 144 400 180 400 224` );
  // Chrome requires an explicit update
  document.querySelector('animateMotion').beginElement();
}

<pre style="position: absolute; pointer-events:none">Move your mouse to change the path</pre>
<svg width="500" height="500">
  <path id="path1" d="M 220 104 C 220 144 400 180 400 224"
        fill="none" stroke-width="2" stroke="black" />
  <path d="M0,0 L0,12 L12,6 z" transform="translate(-3,-6)">
    <animateMotion dur="0s" rotate="auto" fill="freeze"
                   keyTimes="0;1" keyPoints="0.5;0.5" calcMode="linear" >
       <mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

Answer 3

Answer №2

To achieve the desired effect, make use of webkit animation in your CSS code. It is also highly recommended to explore resources like https://codepen.io/collection/yivpx/, which is a fantastic open-source project dedicated to SVG optimization. Additionally, remember to assign names to all classes within your SVG file for enhanced flexibility when applying CSS animations, such as using the following snippet:

animation: kaboom 5s ease alternate infinite;

Answer 4

To achieve the desired effect, make use of webkit animation in your CSS code. It is also highly recommended to explore resources like https://codepen.io/collection/yivpx/, which is a fantastic open-source project dedicated to SVG optimization. Additionally, remember to assign names to all classes within your SVG file for enhanced flexibility when applying CSS animations, such as using the following snippet:

animation: kaboom 5s ease alternate infinite;

Creating dynamic SVG animations through CSS instead of relying on the <animateMotion> tag offer greater flexibility and control

Answer №1

In reference to "EDIT 2" in the question:

Answer №2

Similar questions

Switching the menu based on screen size successfully functions for the div element, however, it does not

Unable to match the height of the inner card image in bootstrap with the height of the outer card image

Inject environment variable into SCSS file while using webpack

Corner of the Border Revealing a Clear Sky above

Interactive text that changes when hovered over in an HTML document

The menu is about to receive some custom styling

The effect of iPad screen orientation on CSS styling

Is there a way to preserve the original color format without converting it to RGB

How can I adjust the size of my elements to be responsive in pixels

enhancing the functionality of appended children by including a toggle class list

How do I overwrite this calculation using JQuery?

triangle shape filled with a gradient that transitions between two colors

Flexbox Columns Maintaining Width when Window is Resized

Flexbox is not properly repeating elements horizontally

Specify the input type to occupy the full width and be contained within its parent div

Showcasing Portfolio Work in a User-Friendly Mobile Design

What is the best way to align vertically a horizontal list that includes both headers and icon images?

Submitted input in a text field is automatically displayed in a separate text box

HTML block failing to implement Bootstrap styling

How can you find the "et-custom-css" section in WordPress?