I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarly, when button2 is clicked, the animation should start from the right. Finally, when button3 is clicked, I want to load page 3 from the center. Can someone please assist me with this?
<div id="main">
<div class="home">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="loadpage"></div>
</div>
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>