I'm trying to animate a tv like in this video: https://www.youtube.com/watch?v=ptV0VgEP0ws but i don't know how to do the "shaking" effect when each black TV screen rotate and scale up. For now i had try this
anime({
targets: '.blackScreen',
rotate: [anime.stagger([0, 15]),anime.stagger([90, 105])],
scale: {
value: [0, 3],
},
translateX: {
value: [160, -160],
direction: 'alternate',
duration: 100,
delay: 1500,
loop: true,
},
easing: 'easeInOutCubic',
duration: 3000,
loop: false,
delay: anime.stagger(130, {start: 600, easing: 'linear'})
});
but the "loop: true" inside translateX doesn't seem to work, it will just do it once. I don't have a clue if it's even possible to do this. I can do this but it's not very clean, is there other way to do this ?
translateX: [
{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
],
Use "easing" effects to animate the shaking. Easing effects can be found in the anime.js documentation:
https://animejs.com/documentation/#springPhysicsEasing