I am animating a SVG with the help of SMIL. All works as expected in chrome except that I want to add an "ease-out" effect to the animatemotion tag. Right now the plane moves along the path in a linear fashion. What I want is that the animation has a slow stop at the end just like how CSS3 ease-out effect.
Here is the SVG code.
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px"
viewBox="0 0 500 700">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<animateMotion
id="1"
xlink:href="#plane"
dur="2s"
path="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31"
fill="freeze"
/>
<g>
<path d="M113.2,586.8c-2.3-1.3-4.8-0.5-6.5,1.9c-0.9,1.4-2,2.7-2.8,4.1c-0.1,0.2-0.2,0.3-0.3,0.4c-0.2,0.5-0.5,1-0.8,1.4
c3.9,0,7.8,0,11.7,0c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0.1,0,0.1,0c0.1-0.3,0.2-0.6,0.3-0.8C116.3,590.6,115.5,588.1,113.2,586.8z"/>
<g id="plane" transform="scale(0.5) translate(-263.9, -167.6)">
<g>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 343.9 167.6"
to="-360 343.9 167.6"
dur="2s"
calcMode="spline"
keySplines="0.6 0.3 0.4 0.335"
keyTimes="0;1"
/>
<path d="M263.9,167.6c7.6-1,14.9-2,22.3-2.8c2.3-0.2,3.6-1.2,4.8-3.1c2.6-4.3,5.5-8.4,8.2-12.6c1.8-2.8,4.5-4,6.8-3.2
c2.6,0.9,3.4,2.7,2.6,5.3c-1.1,3.4-2,6.8-3.1,10.5c5.3-0.7,10.3-1.4,15.4-2.1c7.5-1,14.9-2.1,22.4-3c1.4-0.2,2.3-0.7,3.1-2
c7.2-12.8,14.7-25.4,23.9-36.9c2.7-3.3,5.8-6.3,8.9-9.3c1-1,2.4-1.7,3.7-2.3c4.1-1.9,8.1,0.1,8.4,4.6c0.2,3.4-0.2,7-1.1,10.3
c-2.7,10.2-7.3,19.5-12.1,28.8c-3.1,6-6.4,11.9-9.5,17.8c-0.3,0.6-0.5,1.6-0.3,2.1c5,11.7,10,23.4,15.1,35.2
c0.1,0.2,0.2,0.3,0.5,0.7c2.5-2.7,4.9-5.2,7.3-7.9c1.7-1.9,3-2.2,5.2-1c4,2.1,4.7,4.7,2.5,8.6c-2.7,4.8-5.5,9.7-8.2,14.5
c-0.3,0.6-0.6,1.5-0.3,2c3.5,7.7,7.2,15.3,11,23.3c2-2.6,3.7-5.1,5.5-7.4c1.8-2.4,4.1-3,6.6-1.8c3.1,1.5,4,3.8,2.5,7
c-2.6,5.4-5.2,10.8-7.8,16.3c-0.4,0.8-0.4,2-0.1,2.7c3.3,8,6.7,16,10.2,23.9c1.3,3,1.3,5.8-0.5,8.7c-2.2,3.6-4.2,7.3-6.4,11.2
c-0.5-0.7-1-1.2-1.3-1.7c-13.4-17.9-26.8-35.8-40.1-53.7c-4.5-6.1-8.8-12.3-14.6-17.2c-3.2-2.7-6.7-5.2-10.3-7.4
c-4-2.4-7.8-1.6-11,1.8c-1.3,1.3-2.4,2.9-3.3,4.4c-9.2,16.2-19.6,31.7-30.6,46.8c-0.9,1.3-1.1,2.2-0.5,3.7
c4.9,11.1,9.7,22.3,14.4,33.5c0.4,0.9,0.4,2.2,0,3.1c-1.6,4.5-3.4,8.9-5.1,13.3c-0.2,0.6-0.5,1.2-0.9,2
c-9.4-10.2-18.7-20.2-28.2-30.5c-2.7,2.9-5.1,5.6-7.6,8.2c-0.1-0.1-0.2-0.1-0.4-0.2c1.1-3.5,2.1-7,3.2-10.7c-13.9-3-27.8-6-42-9
c1.2-1.4,2.2-2.5,3.2-3.6c2.2-2.5,4.6-4.9,6.7-7.6c1.6-2,3.5-2.9,6-3.2c11.5-1.4,23.1-3.1,34.6-4.6c1.3-0.2,1.9-0.7,2.5-1.8
c7.7-16.2,15.5-32.3,23.2-48.4c0.7-1.5,1.6-2.9,2.4-4.3c3.3-5.9,2-10.5-3.9-13.8c-6.6-3.8-13.7-6.1-21.1-7
c-11.3-1.5-22.7-2.5-34.1-3.6c-15-1.5-30-2.8-45-4.2c-0.5,0-1-0.1-1.9-0.3c0.4-0.7,0.7-1.3,1-1.9c1.7-3,3.5-5.9,5-9
c1.7-3.4,4-5.2,8.1-5.4c6.3-0.3,12.6-1.6,18.9-2.5c2.5-0.4,5.4-0.1,7.3-1.3c2-1.4,3.1-4.2,4.6-6.4c2.1-3.2,4.2-6.4,6.3-9.6
c1.7-2.6,3.5-3.3,6-2.3c2.9,1.2,4.2,3.3,3.6,6.2C265.8,160.6,264.8,163.9,263.9,167.6z"/>
</g>
</g>
<path d="M56.6,331.6c-3.4,0.1-6.1-2.5-5.2-5.4c1.1-3.9,2.9-7.6,4.7-11.2c1.1-2,4-2.3,6-1.2c2.1,1.2,3,3.7,2.1,6
c-1.2,3-2.5,6.1-3.9,9.1C59.6,330.6,58.1,331.5,56.6,331.6z"/>
<path d="M141.2,322.7c0,2.3-1.4,4.2-3.4,4.8c-2,0.6-4.2-0.1-5.4-1.9c-1.8-2.8-3.5-5.6-5.2-8.4c-1.2-2.1-0.8-4.6,1-6.1
c1.8-1.5,4.8-1.8,6.1,0c2.5,3.4,4.5,7.1,6.7,10.6C141.2,322,141.2,322.5,141.2,322.7z"/>
<path d="M236.3,324.9c0.9-1.2,1.5-2.8,2.6-3.7c2.7-1.9,5.7-3.6,8.6-5.2c2.3-1.3,5-0.4,6.4,1.8c1.3,2.2,0.8,5-1.4,6.5
c-2.9,1.9-5.8,3.7-8.8,5.2C240.5,331.1,236.8,328.7,236.3,324.9z"/>
<path d="M130.7,543.1c3.2,0,5.6,2.9,4.7,6.1c-1,3.3-2.1,6.5-3.4,9.7c-1,2.5-3.7,3.5-6.1,2.6c-2.4-0.9-3.7-3.4-2.9-6
c1-3.1,2.1-6.3,3.3-9.3C127,544.2,128.7,543.1,130.7,543.1z"/>
<path d="M96.3,301.1c-1.6,0.2-3.4,0.4-5.2,0.6c-2.9,0.4-5.2-1.2-5.7-3.9c-0.5-2.6,1.1-5.2,4-5.6c3.4-0.4,6.9-0.7,10.4-0.6
c2.9,0,4.8,2.4,4.6,5.1c-0.2,2.8-2.3,4.6-5.2,4.5C98.3,301.3,97.4,301.2,96.3,301.1z"/>
<path d="M202.1,355.8c-2.4,0-4.3-1.3-5-3.1c-0.7-1.9-0.2-4.2,1.4-5.4c2.8-2.1,5.7-4,8.7-5.9c2.1-1.3,4.7-0.6,6.2,1.4
c1.4,2,1.3,4.8-0.6,6.3c-2.9,2.2-6.1,4.2-9.2,6.2C203.2,355.7,202.5,355.7,202.1,355.8z"/>
<path d="M80.5,365c0,3.8-3.5,6.3-6.5,4.9c-3.3-1.6-6.5-3.6-9.5-5.7c-2.1-1.5-2.3-4.3-0.9-6.4c1.5-2.1,4.2-2.7,6.5-1.4
c2.7,1.6,5.3,3.2,8,4.8C79.6,362.2,80.4,363.6,80.5,365z"/>
<path d="M153.8,370.5c0.8-2.7,2.6-4.1,5.3-4.7c2.3-0.5,4.5-1.5,6.8-2.2c2.9-1,5.6,0.2,6.5,2.8c0.9,2.7-0.3,5.2-3.2,6.3
c-2.5,0.9-5.1,1.8-7.7,2.6C157,376.7,154.5,375.1,153.8,370.5L153.8,370.5z"/>
<path d="M140.4,515.8c-3,0-5.2-2.6-4.7-5.6c0.5-3.3,1.2-6.5,1.9-9.7c0.5-2.5,2.9-4,5.3-3.7c2.5,0.4,4.5,2.7,4.1,5.2
c-0.5,3.5-1.2,7-2.1,10.5C144.5,514.5,142.5,515.8,140.4,515.8z"/>
<path d="M153.9,370.4c-0.9,0.8-1.7,1.9-2.7,2.4c-2.8,1.4-6.1-0.3-6.7-3.4c-0.6-3.3-1.1-6.6-1.5-10c-0.3-2.5,1.5-4.7,3.9-5.2
c2.4-0.4,5,0.9,5.4,3.3C153,361.9,153.3,366.2,153.9,370.4L153.9,370.4z"/>
<path d="M143.1,463c0.3-2.9,0.6-6.1,1.1-9.4c0.4-2.7,2.8-4.4,5.4-4.1c2.5,0.3,4.4,2.7,4.2,5.3c-0.3,3.2-0.7,6.3-1.1,9.4
c-0.4,2.9-2.6,4.6-5.4,4.3C144.8,468.3,143,466.2,143.1,463z"/>
<path d="M118,381.4c-2-0.2-4.1-0.3-6.1-0.6c-3.1-0.3-4.9-2.5-4.6-5.3c0.2-2.7,2.4-4.5,5.4-4.3c3,0.2,6.1,0.4,9.1,0.6
c2.8,0.2,4.7,2.3,4.6,5c-0.1,2.6-2.1,4.6-4.9,4.7C120.2,381.5,119.1,381.4,118,381.4C118,381.4,118,381.4,118,381.4z"/>
<path d="M151.4,421L151.4,421c-2.7,0-4.9-2.2-4.9-4.9v-9.2c0-2.7,2.2-4.9,4.9-4.9h0c2.7,0,4.9,2.2,4.9,4.9v9.2
C156.2,418.8,154.1,421,151.4,421z"/>
</g>
<path class="st0" d="M104,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31"/>
The <animate> SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element which we want to animate. Attributes: Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
Overview. SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include: <animate></animate> – which allows you to animate scalar attributes and properties over a period of time.
To animate this path as if it's being drawn gradually and smoothly on the screen, you have to set the dash (and gap) lengths, using the stroke-dasharray attribute, equal to the path length. This is so that the length of each dash and gap in the dashed curve is equal to the length of the entire path.
Most of the question author's application code draws a path for an airplane in the form of a bunch of sausages.
This code can be as simple as possible by applying stroke-dasharray
andstroke-linecap = "round"
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px"
width="100%" height="100%" viewBox="0 0 500 700">
<g id="path_G" transform="translate(100 -200)">
<path stroke="skyblue" stroke-width="10" stroke-dasharray="15 25" stroke-linecap="round" fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />
<path id="path_GL" stroke="skyblue" stroke-width="1" fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />
</g>
</svg>
Instead of two animations, animateMotion
andanimateTransform
, we’ll use the same animation
<animate
attributeName="startOffset"
dur="16s"
repeatCount="indefinite"
values="0%;120%"
calcMode="spline"
keySplines=" 0.185,0.675,0,0.995"/>
To make CSS3 ease-out effect
we use a bezier curve generator
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px"
width="50%" height="50%" viewBox="0 0 500 700">
<g id="path_G" transform="translate(100 -250)">
<path stroke="skyblue" stroke-width="10" stroke-dasharray="15 25" stroke-linecap="round" fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />
<path id="path_GL" stroke="skyblue" stroke-width="1" fill="none" d="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31" />
<text font-size="64" font-family="Times New Roman" fill="dodgerblue" >
<textPath id="result" xlink:href="#path_GL">
<tspan dx="0" > ✈ </tspan>
<animate
attributeName="startOffset"
dur="20s"
repeatCount="indefinite"
values="0%;120%"
calcMode="spline"
keySplines=" 0.185,0.675,0,0.995"/>
</textPath>
</text>
</g>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With