how to make an animation run according to the orientation of the mobile or the tablet?

Topic resize :

What you should do is add a listener to the resize event. You can do this in the following way:

window.addEventListener('resize', function(event){
  // Ingresas tu código de validación aquí y ejecutas lo que corresponda
});

  

To take into account: Every time a size change occurs, either by changing   orientation of the device or because it is played with the width of the   screen, this event will shoot, keep that in mind.

Topic portrait or landscape :

For what it is to identify if it is in portrait or landscape , my recommendation is to use the following since it is as if it were css:

if (window.matchMedia("(orientation: portrait)").matches) {
   // Es PORTRAIT 
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // Es LANDSCAPE
}

Theme simulate orientation and sizes:

Finally if you want to try this from a computer and rotate the screen, you can do it with the development console of any browser. For example with Chrome, press "F12" and then "Ctr + Shift + M" and open the bar to select device, size and orientation with which you want to see the page (as seen in the image)

Why add a listener to resize ?

This is because the user can change the orientation or size of your screen when you are using the site and you should be aware of this echo to perform some action, in your case run an animation.

Sample listener usage:

function main() {
    // Donde esta el core de toda la logica

    funcion_validaciones() // Ejecutas para que se hagan las animaciones si corresponde.

    //Ahora agregas el listener para cambios futuros.
    window.addEventListener('resize', (event) => { // Asumo que puedes usar arrowFuntion en la version de js que usas
        funcion_validaciones()
    });

}

function funcion_animaciones() {
    // Todo tu codigo de animaciones
}

function funcion_validaciones() {
    // Todo tu codigo de validaciones
    // Que luego llama a funcion_animaciones() si corresponde
}

According to what I understand, the orientation property has been considered obsolete, although some browsers may still support it, eventually they will stop doing it ... link

On the other hand, the Screen.orientation property that is supported by most browsers exists in experimental mode.

Check This:

var orientation = screen.msOrientation || (screen.orientation || screen.mozOrientation || {}).type;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
 console.log("The orientation API isn't supported in this browser :("); 
}

More Information: link

Also, if you are using a local server such as xampp or wamp, you can access from a cell phone or tablet or any other device by putting the local ip of your laptop and then the path to your project eg:

192.x.x.x / project / index.php