Я хочу сделать чтобы данный блок "story__flotation" выходил слева на права при нажатии на кнопку ТАБА, но не знаю как сделать, подскажите как это можно реализовать данную анимацию
<section id="story" class="story">
<div class="container story__container">
<div class="story__content">
<div class="story__tabflotation">
<ul class="story__tabs">
<li class="tab tab__active">Our founders</li>
<li class="tab">Partners</li>
<li class="tab">The future</li>
</ul>
<div class="story__flotation">
<div class="flotation flotation__active">
<div class="flotation__text">
<div class="flotation__green-block">
<div class="flotation__green-line"></div>
<div class="flotation__green-text">1META record label was founded by Shaky Lake and Baky Hike in 2020 business accelerator.</div>
</div>
<div class="flotation__descr">Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet dictum sit amet justo. Tortor aliquam nulla facilisi cras.</div>
<div class="flotation__descr">Maecenas ultricies mi eget mauris pharetra. Sit amet consectetur adipiscing elit ut aliquam purus. Porta nibh venenatis cras sed felis. Aenean vel elit scelerisque mauris pellentesque pulvinar. Et malesuada fames ac turpis egestas sed tempus. Enim sit amet venenatis urna cursus eget.</div>
<div class="flotation__descr">Maecenas ultricies mi eget mauris pharetra et ultrices. A condimentum vitae sapien pellentesque habitant morbi.</div>
</div>
</div>
<div class="flotation">
<div class="flotation__text">
<div class="flotation__green-block">
<div class="flotation__green-line"></div>
<div class="flotation__green-text">2META record label was founded by Shaky Lake and Baky Hike in 2020 business accelerator.</div>
</div>
<div class="flotation__descr">Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet dictum sit amet justo. Tortor aliquam nulla facilisi cras.</div>
<div class="flotation__descr">Maecenas ultricies mi eget mauris pharetra. Sit amet consectetur adipiscing elit ut aliquam purus. Porta nibh venenatis cras sed felis. Aenean vel elit scelerisque mauris pellentesque pulvinar. Et malesuada fames ac turpis egestas sed tempus. Enim sit amet venenatis urna cursus eget.</div>
<div class="flotation__descr">Maecenas ultricies mi eget mauris pharetra et ultrices. A condimentum vitae sapien pellentesque habitant morbi.</div>
</div>
</div>
<div class="flotation">
<div class="flotation__text">
<div class="flotation__green-block">
<div class="flotation__green-line"></div>
<div class="flotation__green-text">3META record label was founded by Shaky Lake and Baky Hike in 2020 business accelerator.</div>
</div>
<div class="flotation__descr">Hac habitasse platea dictumst vestibulum rhoncus est. Sit amet dictum sit amet justo. Tortor aliquam nulla facilisi cras.</div>
<div class="flotation__descr">Maecenas ultricies mi eget mauris pharetra. Sit amet consectetur adipiscing elit ut aliquam purus. Porta nibh venenatis cras sed felis. Aenean vel elit scelerisque mauris pellentesque pulvinar. Et malesuada fames ac turpis egestas sed tempus. Enim sit amet venenatis urna cursus eget.</div>
<div class="flotation__descr">Maecenas ultricies mi eget mauris pharetra et ultrices. A condimentum vitae sapien pellentesque habitant morbi.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.story__container {
padding: 238px 40px 120px;
}
.story__content {
width: 1160px;
}
.story__tabflotation {
display: flex;
margin-top: 61px;
}
.tab {
display: flex;
align-items: center;
padding-left: 28px;
width: 282px;
height: 72px;
border-radius: 0px;
font-family: DMMono;
font-weight: 400;
font-size: 16px;
cursor: pointer;
}
.tab:hover {
background: #222;
color: #8dfd1b;
}
.tab__active {
background: #222;
color: #8dfd1b;
}
.flotation {
display: none;
padding: 60px;
background: #222;
position: relative;
left: -100%;
}
.flotation__active {
display: flex;
position: relative;
left: 0%;
}
.flotation__image {
width: 100%;
height: 100%;
}
.flotation__text {
margin-left: 40px;
}
.flotation__green-block {
display: flex;
}
.flotation__green-line {
border-left: 2px solid #8dfd1b;
height: 93px;
}
.flotation__green-text {
margin-left: 22px;
font-family: DMMono;
font-weight: 400;
font-size: 21px;
line-height: 32px;
color: #8dfd1b;
}
.flotation__descr {
margin-top: 17px;
font-family: Inter;
font-weight: 400;
font-size: 16px;
line-height: 26px;
}
.flotation__descr:nth-child(2) {
margin-top: 32px;
}
.flotation__descr:nth-child(3) {
margin-top: 18px;
}
console.log( 'test' );
const tabs = document.querySelectorAll( '.tab' );
const flotations = document.querySelectorAll( '.flotation' );
for( let i=0; i < tabs.length; i++ ) {
tabs[i].addEventListener( 'click', ( event ) => {
// Удаляем класс
let tabsCurrent = event.target.parentElement.children;
for( let t=0; t < tabsCurrent.length; t++ ) {
tabsCurrent[t].classList.remove( 'tab__active' );
}
// Добавляем класс текущий
event.target.classList.add( 'tab__active' );
// Удаляем класс
let flotationsCurrent = event.target.parentElement.nextElementSibling.children;
for( let c=0; c < flotationsCurrent.length; c++ ) {
flotationsCurrent[c].classList.remove( 'flotation__active' );
}
// Добавляем класс текущий
flotations[i].classList.add( 'flotation__active' );
});
}
Простой
