Strange SVG Animation behavior.

[MrTimcakes]

Alright, so I’ve got my SVG animated perfectly… apart from the last element in the SVG. Now that kinda ruins the whole animation.

What I have is a Hexagon made of 6 individual triangles, which are then animated to fold out, then fold back in on a loop to be used as a loader animation. Here is the CodePen

The animation utilizes SVG Groups to allow it to stack css Transform rotations, so I can rotate the Triangles into a Hexagon, then rotate them in 3D to unfold them, and finally flip them so the same animation can be played to fold them back in.

This all works perfectly, but the last element glitches and is in the wrong position, I can’t figure out why, its something to do with the rotation to flip the triangels to enable folding back, if you change the percentages in the hexagon-flip-triangles keyframes to 59.99% and 60% it behaves differently still and the last triangle folds in the original way, (its not being flipped).

Can anyone give their two cents?

[MrTimcakes]

Alright, eventually, I fixed it, I just delayed the animation that rotates the triangles to fold back in by the same ammount that each triangles main animation is delayed by (0.33*$i+s). Here’s the fixed version.

[Author]

Posts