Js animation, how to organize a single interface for frames?

Question

JavaScript

Good time community!
Such a situation: a 2D game, the character can walk left, right, rises up, frame animation is used.
How to use a single interface for working with frame animation?
There is a class/function:

function Sprite(){
    this.size;        // [30,40] - ширина и высота спрайт элемента
    this.position;    // [0,0] - х, у
    this.frame;       // [0,1,2,3,4,5,6] - кадры на спрайт-карте
}

Accordingly, for each of the directions of movement, I have my own spriteline on the general sprite map (left, right, up)
And there is a class / function for the object that contains the sprites.

function Elem(){
    this.size       = {width: 0, height: 0};
    this.position   = {top: 0, left: 0};
    this.movement   = new Sprite();         // Храним актуальный спрайт

    this.sprite     = {
        left:  new Sprite(),
        right: new Sprite(),
        up:    new Sprite(),
    }

    this.status = {frame: 0, movement: 'left'};
}

My single interface is Elem().movement which, depending on the direction, overwrites data from Elem().sprite.(left,right,up)
i.e. if my character needs to go to the right, then I reload Elem().movement = Elem().sprite.rightand keep working with the animation in the unified interface.
This is my question:
How right am I thinking?
How do they generally solve such problems?
Where can I read about this whole thing?
Thank you!

Answer 1

https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BD%D...