Create "bobblehead" animation jquery-CodePudding

A bobblehead effect would be a "U" animation shape in my mind with slightly shorter stems.

I've tried using various arcs/semi-circles to create a bobblehead effect but nothing is working correctly.

I must use transform with translate due to it being an SVG. I am also using animejs but I cannot see a method to achieve this on that library either. jQuery animation steps seems the most simple?

This is the effect I'm looking to achieve:

Using this code:

function loopBobble() {

    var end = 180;

    $({
        counter: 0
    }).animate({
        counter: end
    },{
        duration: 1000,
        easing: "swing",
        step: function(t, fx) {
        
            var a = t / 60; // from degrees to radians
            var x = Math.cos(a) * 10;
            var y = Math.sin(a) * 10;
            $('#bobble').attr('style', 'transform: translateX('   x   'px) translateY('   y   'px);');

            if (t == end) {
                loopBobble();
            }
        }
    });
}
loopBobble();

The best I am able to achieve with the creepy face is this result:

Is my approach correct? I would have assumed a "U" shape animation would be built into animejs or jquery. I cannot find much online. I am no mathematician

CodePudding user response：

How about css only?

.head {
  background-color: #FA0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  left: 0px;
  top: 0px;
  position: absolute;
  animation-name: xOffset;
  animation-duration: 1s;
  animation:
    xOffset 1s ease-in-out infinite,
    yOffset .5s ease-in-out infinite;
}

@keyframes xOffset {
  50% { left: 50px; }
  100% { left: 0px; }
}

@keyframes yOffset {
  50% { top: 25px; }
  100% { top: 0px; }
}

<div ></div>

transform: translate-Version

You'll have to add a wrapper in your csv to apply separated easing-times on x and y. Otherwise different easing-times are not possible using transform since transform is animated as a whole.

.head {
  background-color: #FA0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation-name: xOffset;
  animation-duration: 1s;
  animation: xOffset 1s ease-in-out infinite;
}

.wrapper {
  animation: yOffset .5s ease-in-out infinite;
}

@keyframes xOffset {
  50% { transform: translateX(50px); }
  100% { transform: translateX(0px); }
}

@keyframes yOffset {
  50% { transform: translateY(25px); }
  100% { transform: translateY(0px); }
}

<div >
  <div ></div>
</div>