Stuck with CSS3 Animation and SVG

[Raul_Dronca]

Hello guys,

I’m working on this Pacman Playground and I don’t know how to make Pacman to close and open the mouth while eating the dots like in this example. I also don’t know how to make him rotate to the corners too.

A friend of mine made the design for me and exported the SVG so I can code it.

I’m new to CSS3 and SVG Animations, so I could use some help from you
Also I’m using a JS Library to manipulate SVG’s.
I know it’s a little hardcoded all the stuff right there but any suggestions would be greatly appreciated

Thanks!

[relio]

The following will get you closer to what you need

First the rotation

$(".pacman")
    // .delay(1000)
  .velocity({translateX: "-=343"}, 1000, "linear")	 
// .velocity({ rotateZ: "90" }, 10, "linear")
  .velocity({ translateY: "-=252" }, 1000, "linear")
      .velocity({ rotateZ: "180" }, 10, "linear")
  .velocity({ translateX: "+=348" }, 1000, "linear")
      .velocity({ rotateZ: "270" }, 10, "linear")
  .velocity({ translateY: "+=130" }, 800, function() {
      $(".playground").css("animation", "animate-text 1s infinite");  
      $(".pacman").fadeOut("slow");
});

Note the rotateZ that is what rotates the pacman. With with above code we are turning on the second and third turn. For the first turn this .velocity({ rotateZ: "90" }, 10, "linear") should work but it’s not working - it is illogical for the other two to work and the first not to - I have no idea what is going on there. But you are closer with the above code

Opening and closing the mouth

At the moment your pacman scg is an entire image. The way I would do it is great two half circles, group them together, them with something like

@keyframes lower-half {
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes upper-half {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

But you really need to get a group of two half circled svg graphics

Hope this brings you closer to the solution

[Raul_Dronca]

Hi Relio,

I tried with rotateZ to rotate the Pacman but it doesn’t work, I don’t know why too.

Ok, how do I make the Pacman in two half circles? You mean two SVG paths? How to set them in the same position on the page as it is right now?

I appreciate your help! Thanks!

[relio]

The easiest way is to use illustrator, or any svg graphics editor. There you draw the two halves, group them together and export them in your code.

I can’t do it as it’s been months since my CS6 programs don’t work, but the person that created the current graphs is able to do that with no problem.

[Raul_Dronca]

Yeah, I think is the only solution.
Thank you Relio