Shake animation inside normal animation anime.js

858 Views Asked by At

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},
],
1

There are 1 best solutions below

0
AudioBubble On

Use "easing" effects to animate the shaking. Easing effects can be found in the anime.js documentation:

https://animejs.com/documentation/#springPhysicsEasing