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. https://i.sstatic.net/RvBLV.png

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.

https://i.sstatic.net/VVOhy.png

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

The button is not centered within the grid container

What is the best way to automatically close a modal window after pressing the submit button

Is this an effective and appropriate method for establishing media queries?

Is there a way to condense a paragraph of text without using a span or div element?

The edge of the 'parent' element is obscured by the :after element

In the world of web design, blank areas can sometimes appear on a page as you

Is there a way to automatically refresh the page and empty the input fields after clicking the submit button on the contact form?

Exploring different ways to customize the grid style in Angular 6

Can someone tell me where I can locate the CSS file once I've finished using Scene Builder?

Is it possible to deactivate the onclick event following a successful ajax request?

ID is not receiving the CSS styles

What is the suitable condition necessary for optimal functionality?

organize multiple blocks in the middle of the page (html)

What is the procedure for adding a background to a primeNg Tree component?

"Enhance Your Webpage with Textual Links that Display Background

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

Is there an issue with the CSS styling causing the IE7 button to not display correctly?

Is it feasible to exclusively apply Twitter Bootstraps .navbar-fix-to-top on mobile devices?

Ways to expand the play and pause buttons and adjust the height of an HTML audio player

Matching an element that contains a specific string in JS/CSS