Как заблокировать анимацию на месте?

Question

[ovsy]

Всем привет. Есть анимация, которая при наличии закрывает собой header и при скролле спускается вниз, но должна оставаться на месте, как исправить такое поведение?

const size = 50
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = 200
canvas.height = 200
canvas.classList.add('tempcanvas')
document.body.appendChild(canvas)

function loadImages (paths, whenLoaded) {
  const imgs = []
  paths.forEach(function (path) {
    const img = new Image()
    img.onload = function () {
      imgs.push(img)
      if (imgs.length === paths.length) { whenLoaded(imgs) }
    }
    img.src = path
  })
}

function fillUp (array, max) {
  const length = array.length
  for (let i = 0; i < max - length; i++) {
    array.push(array[Math.floor(Math.random() * length)])
  }
  return array
}

function shuffle (a) {
  for (let i = a.length; i; i--) {
    const j = Math.floor(Math.random() * i);
    [a[i - 1], a[j]] = [a[j], a[i - 1]]
  }
  return a
}

function getArrayFromImage (img) {
  const imageCoords = []
  ctx.clearRect(0, 0, size, size)
  ctx.drawImage(img, 0, 0, size, size)
  let data = ctx.getImageData(0, 0, size, size)

  data = data.data
  for (let y = 0; y < size; y++) {
    for (let x = 0; x < size; x++) {
      const alpha = data[((size * y) + x) * 4 + 3]
      if (alpha > 0) {
        imageCoords.push([10 * (x - size / 2), 10 * (size / 2 - y)])
      }
    }
  }
  return shuffle(fillUp(imageCoords, 3000))
}

const images = ['../img/svg/11.png', '../img/svg/33.png']
loadImages(images, function (loadedImages) {
  const gallery = []
  loadedImages.forEach((index) => {
    gallery.push(getArrayFromImage(index))
  })

  let camera, scene, renderer, geometry

  function init () {
    scene = new THREE.Scene()
    scene.background = null
    renderer = new THREE.WebGLRenderer({ alpha: true })
    renderer.setClearColor(0xFFFFFF, 0)
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)

    const container = document.getElementById('logo__svg')
    container.appendChild(renderer.domElement)

    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 3000)
    camera.position.z = 500

    controls = new THREE.OrbitControls(camera, renderer.domElement)

    // ЧТО ЕСТЬ НА СЦЕНЕ
    const texture = (new THREE.TextureLoader()).load('../img/svg/particle.png')
    const material = new THREE.PointsMaterial({
      size: 5,
      vertexColors: THREE.VertexColors,
      map: texture,
      alphaTest: 0.5
    })

    geometry = new THREE.Geometry()

    gallery[0].forEach((el) => {
      geometry.vertices.push(new THREE.Vector3(el[0], el[1], Math.random() * 10))
      geometry.colors.push(new THREE.Color(Math.random(), Math.random(), Math.random()))
    })

    const pointCloud = new THREE.PointCloud(geometry, material)
    scene.add(pointCloud)
    // Конец сцены

    window.addEventListener('resize', onWindowResize, false)
  }

  function onWindowResize () {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }

  // eslint-disable-next-line no-var
  var i = 0
  function animate () {
    i++
    requestAnimationFrame(animate)

    geometry.vertices.forEach(function (particle, index) {
      const dX = Math.sin(i / 10 + index / 2) / 10
      particle.add(new THREE.Vector3(dX, 0, 0))
    })
    geometry.verticesNeedUpdate = true

    render()
  }

  function render () {
    renderer.render(scene, camera)
  }

  init()
  animate()

  let current = 0
  // eslint-disable-next-line no-var, no-redeclare
  var i = 1;
  (function myLoop (i) {
    setTimeout(function () {
      current++
      current = current % gallery.length
      geometry.vertices.forEach(function (particle, index) {
        const tl = new TimelineMax()
        tl.to(particle, 1, { x: gallery[current][index][0], y: gallery[current][index][1] })
      })
      if (--i) { myLoop(i) } //  decrement i and call myLoop again if i > 0
    }, 3500)
  })(1000) //  pass the number of iterations as an argument
  document.body.addEventListener('click', function () {
    current++
    current = current % gallery.length
    geometry.vertices.forEach(function (particle, index) {
      const tl = new TimelineMax()
      tl.to(particle, 1, { x: gallery[current][index][0], y: gallery[current][index][1] })
    })
  })
})