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:
[![enter image description here][1]][1]
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:
[![enter image description here][2]][2]
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
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 class="head"></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 class="wrapper">
<div class="head"></div>
</div>