.group { text-align: center; white-space: nowrap; overflow: hidden; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
const items = document.querySelectorAll('.item')
const expand = (item, i) => {
items.forEach((it, ind) => {
if (i === ind) return
it.clicked = false
})
gsap.to(items, {
width: item.clicked ? '15vw' : '8vw',
duration: 2,
ease: 'elastic(1, .6)'
})
item.clicked = !item.clicked
gsap.to(item, {
width: item.clicked ? '42vw' : '15vw',
duration: 2.5,
ease: 'elastic(2, .3)'
})
}
items.forEach((item, i) => {
item.clicked = false
item.addEventListener('click', () => expand(item, i))
})
</script>
If for this tutorial you need a plugin you can find it in the plugin page.
