Elastic Image Gallery with Elementor

				
					.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 you need any plugin for this tutorial you can find it in the plugins page.
Share on your social networks

Leave a Comment