<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
jQuery(document).ready(function( $ ){
 
  const root = document.querySelector('.mwg_effect062')
  const images = []
 
  root.querySelectorAll('.medias img').forEach(image => {
    images.push(image.getAttribute('src'))
  })
 
  let isTouch = false
  if (window.matchMedia('(hover: none)').matches) isTouch = true
 
  let incr = 0,
      oldIncrX = 0,
      oldIncrY = 0,
      resetDist = window.innerWidth / (isTouch ? 3 : 8),
      indexImg = 0
 
  const rectTop = () => root.getBoundingClientRect().top
 
  const W = window.innerWidth
  const H = window.innerHeight
  const clampX = gsap.utils.clamp(0, W)
  const clampY = gsap.utils.clamp(0, H)
 
  function applyMove(clientX, clientY) {
    const valX = clampX(clientX)
    const valY = clampY(clientY)
 
    incr += Math.abs(valX - oldIncrX) + Math.abs(valY - oldIncrY)
    if (incr > resetDist) {
      incr = 0
      createMedia(valX, valY - rectTop(), valX - oldIncrX, valY - oldIncrY)
    }
    oldIncrX = valX
    oldIncrY = valY
  }
 
  function handleMouseMove(e) {
    applyMove(e.clientX, e.clientY)
  }
 
  function handleTouchMove(e) {
    if (!e.touches || !e.touches[0]) return
    applyMove(e.touches[0].clientX, e.touches[0].clientY)
  }
 
  const initPointer = (clientX, clientY) => {
    oldIncrX = clampX(clientX)
    oldIncrY = clampY(clientY)
  }
 
  root.addEventListener('mousemove', (e) => initPointer(e.clientX, e.clientY), { once: true })
  root.addEventListener('touchstart', (e) => {
    if (!e.touches || !e.touches[0]) return
    initPointer(e.touches[0].clientX, e.touches[0].clientY)
  }, { once: true, passive: true })
 
  root.addEventListener('mousemove', handleMouseMove)
  root.addEventListener('touchmove', handleTouchMove, { passive: true })
 
  function createMedia(x, y, deltaX, deltaY) {
    const image = document.createElement('img')
    image.setAttribute('src', images[indexImg])
    root.appendChild(image)
 
    const w = image.offsetWidth
    const h = image.offsetHeight
    const cx = x - w / 2
    const cy = y - h / 2
 
    const rndRot     = (Math.random() - 0.5) * 30
    const overshootX = cx + deltaX * 3.5
    const overshootY = cy + deltaY * 3.5
 
    const tl = gsap.timeline({
      onComplete: () => {
        if (root.contains(image)) root.removeChild(image)
        tl && tl.kill()
      }
    })
 
    tl.fromTo(image, {
      x: cx,
      y: cy,
      scaleX: 1.3,
      scaleY: 1.3,
      rotation: rndRot,
      opacity: 1
    }, {
      scaleX: 1,
      scaleY: 1,
      ease: 'elastic.out(2, 0.6)',
      duration: 0.6
    })
 
    tl.to(image, {
      x: overshootX,
      y: overshootY,
      rotation: (Math.random() - 0.5) * 30,
      ease: 'power2.out',
      duration: 0.25
    }, '<')
 
    tl.to(image, {
      x: cx,
      y: cy,
      ease: 'elastic.out(1.4, 0.5)',
      duration: 0.55
    })
 
    tl.to(image, {
      scale: 0.5,
      opacity: 0,
      ease: 'back.in(1.5)',
      duration: 0.3,
      delay: 0.1
    })
 
    indexImg = (indexImg + 1) % images.length
  }
 
});
	</script>