JSFiddle - React, Tailwind, and code Playground

HTML

<div id='area-container'>
    
</div>

CSS

#area-container {
overflow: hidden;
width: 300px;
height: 300px;
float: left;
position: relative;
}

.color-area{
width: 100%;
height: 100%;
position: absolute;
float: left;
display: inline-block;
}

JavaScript

//create the pre-existing color-area
var newPage = $( "<div id='color-scroll-area' class='color-area'/>" );
newPage.css({
    backgroundColor: "red"
});
//append it
$('#area-container').append(newPage);


//jquery new color area page
var newPage = $( "<div id='color-scroll-area-new' class='color-area'/>" );
newPage.css({
    backgroundColor: "blue"
});
//create new page on the right
newPage.css({
    left: "100%"
});
//append it to the color-scroll (viewport)
$('#area-container').append(newPage);

//slide the new one into the viewport
$('#color-scroll-area-new').animate({
    left: "0%"
}, {duration: 500, queue: false});

//slide the old one out of the viewport
$('#color-scroll-area').animate({
    left: "-100%"
}, {duration: 500, queue: false});

//the new one becomes the old one
$('#color-scroll-area-new').attr('id', 'color-scroll-area');