Galería de imágenes elástica con 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>
				
			
Si para este tutorial necesitas algún plugin lo podrás encontrar en la pagina de plugins.
Comparte en tus redes sociales

Deja un comentario