I'm a designer with little coding experience and a while ago I played around with SMIL animations and I remember that some browsers did not support specific commands. Now I wanted to review my animations and unfortunately noticed that the browser I originally tested the animations with successfully (opera) also stopped playing my animation back correctly. The blue ball used to move up and down the y-axis and this animation is not working anymore now.
Do you guys know why this animation is not played back correctly anymore in codepen and how I can view the animation as it used to be?
https://codepen.io/clemse/pen/gOYPNJZ
This is the part that does not seem to work:
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="
0.1 0.9 1.0 1.0;
1.0 1.0 1.0 1.0;
0.5 1.6 0.1 0.9;
0.1 0.9 1.0 1.6;"
keyTimes="
0;0.20;0.40;0.8;1"
calcMode="spline"
repeatCount="indefinite"
/>
You can have a look at the console and you will see where the problem is. According to the specs for keySplines,
The values of x1 y1 x2 y2 must all be in the range 0 to 1.
Your example has two values of 1.6. I have changed them to 0.6 and it works in my browser (Chrome).
<svg style="display:block; margin: 0 auto;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 300 300">
<!-- Background shape-->
<rect x="0" y="0" width="300" height="300" fill="#FCCE01 "/>
<!-- Opening the Group for the Toy-->
<g>
<!-- Animating the balls impact on the toyvertically-->
<animateTransform
attributeName="transform"
type="translate"
values="0,0;0,8;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0;0,0"
begin="1.0s"
dur="1.6"
repeatCount="indefinite"
/>
<!-- Positioning the toy-->
<g transform="translate(-65,34)">
<!-- Ball shape-->
<ellipse cx="217" cy="30" rx="15" ry="15"
fill="#65c8d2"
stroke="#4e2561"
stroke-width="3">
<!-- Animating the ball along the Y Axis, with specific y coordinate values relative to time, with speed dependent on bezier curve -->
<animate
attributeName="cy"
begin="0.2s"
dur="1.6s"
values="142;10;-5;142;142"
keySplines="0.1 0.9 1.0 1.0;1.0 1.0 1.0 1.0;0.5 0.6 0.1 0.9;0.1 0.9 1.0 0.6"
keyTimes="0;0.20;0.40;0.8;1"
calcMode="spline"
repeatCount="indefinite"
/>
<!-- Animating the balls shape (squashing) along the x axis-->
<animate
attributeName="rx"
values="15; 10.5 ; 17 ; 19 ; 15 ; 10.5 ; 17 ; 15 ; 15 ; 15 ; 15"
begin="0.2s"
dur="1.6s"
repeatCount="indefinite"
/>
<!-- Closing the object so only the ball gets animated-->
</ellipse>
<!-- Positioning the trigger-->
<g transform="translate(200,150)">
<!-- Drawing the trigger-->
<path d="M0,0 L-14,0 Q-15,20 3,25 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d">
<!--Animating the triggers rotation-->
<animateTransform
attributeName="transform"
type="rotate"
values="0 0 0; -30 0 0; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0; 0 0 0 ; 0 0 0 ; 0 0 0 ; 0 0 0 "
begin="0s"
dur="1.6s"
fill="freeze"
repeatCount="indefinite"
/>
</path>
</g>
<!--Positioning the cage-->
<g transform="translate(200,150)">
<!--Drawing the cage-->
<path d="M0,0 L-18,-52 L52,-52 L34,0 L10,0 L2,-52 M30,-52 L24,0 M-5,-17 L40,-17 M45,-34 L-12,-34"
style="stroke:#4e2561;
stroke-width:3;
fill:none"/>
</g>
<!--Positioning the Cone-->
<g transform="translate(200,150)">
<!--Drawing the Cone-->
<path d="M0,0 L10,75 A1,1 0 0,0 24,75 L34,0 L0,0z "
style="stroke:#4e2561;
stroke-width:3;
fill:#e54e6d"/>
</g>
</g>
</svg>