ScrollMagic/TweenMax, una línea de tiempo para múltiples escenas/puntos de ruptura

Tengo los mismos elementos que necesito animar a diferentes partes de la página mientras pergamino (up-down, izquierda-derecha y así sucesivamente). Lo que hice es agregar escena y cronograma para cada punto de ruptura (como #one, #two,..., #six, etc.) y algún movimiento unido a estas secciones. Traté de TweenLite.to, luego lo cambié de To.

// ONE //
  let elementsTL = new TimelineMax({ paused: true })
  elementsTL.add(
    TweenLite.fromTo('.animation-elements .vertical-line-wrapper', 1.5, {
      top: '2%', ease: Expo.ease,
    }, {
      top: '95%', ease: Expo.ease,
    }),
    0,
  )
  new ScrollMagic.Scene({
    triggerElement: '#one',
    triggerHook: 0.9,
  })
    .setTween(elementsTL)
    .addIndicators({
      name: 'one',
    })
    .addTo(controller)



 // TWO //
  let elements2TL = new TimelineMax({ paused: true })
  elements2TL.add(
    TweenLite.fromTo('.animation-elements .vertical-line-wrapper', 1.5, {
      top: '95%', ease: Expo.ease,
    }, {
      top: '75%', ease: Expo.ease,
    }),
    0,
  )
  new ScrollMagic.Scene({
    triggerElement: '#two',
    triggerHook: 0.9,
  })
    .setTween(elements2TL)
    .addIndicators({
      name: 'two',
    })
    .addTo(controller)
.....

el problema es que si me desplazaré rápido de última a primera, ese elemento salta y entiendo por qué. Can Tengo una línea de tiempo que puedo adjuntar animaciones a ella y romperlo a secciones (ids)? ¿Qué se puede hacer aquí?

Pregunta hecha hace 3 años, 4 meses, 27 días - Por scriptsorcererf493

2 Respuestas:

  • Para evitar que los elementos salten al desplazarte rápidamente de la última a la primera sección, puedes utilizar la función addLabel de la clase TimelineMax para marcar los puntos de inicio de cada animación en la línea de tiempo y luego utilizar seek para saltar directamente a ese punto de la animación cuando se activa la escena correspondiente.

    Aquí te muestro cómo puedes modificar tu código para implementar esta solución:

    javascript
// Crear una sola línea de tiempo para todos los elementos animados
let masterTL = new TimelineMax({ paused: true });
masterTL
    .addLabel('one') // Marcar el inicio de la animación de la sección '
    one'
        .fromTo('.animation-elements .vertical-line-wrapper', 1.5, { top: '2%', ease: Expo.ease }, { top: '95%', ease: Expo.ease }, 'one')
    .addLabel('two') // Marcar el inicio de la animación de la sección '
    two'
        .fromTo('.animation-elements .vertical-line-wrapper', 1.5, { top: '95%', ease: Expo.ease }, { top: '75%', ease: Expo.ease }, 'two')
    // Agrega más animaciones para otras secciones según sea necesario

// Crear una sola escena ScrollMagic que activará la reproducción de la línea de tiempo en función de la sección visible
new ScrollMagic.Scene({
    triggerElement: '
    one',
        triggerHook: 0.9,
})
.setTween(masterTL)
.on('enter', function (e) {
    // Busca la etiqueta apropiada de la línea de tiempo según la sección actual y salta a ella
    masterTL.seek(e.target.triggerElement().id);
})
.addTo(controller);

    Con este enfoque, puedes controlar las animaciones de todos los elementos en una sola línea de tiempo y saltar directamente a la parte deseada de la animación cuando se active la escena correspondiente. Repite este patrón para cada sección que necesites animar.

    Espero que esta solución te ayude a resolver el problema de los saltos de elementos al desplazarte rápidamente entre secciones en tu página web.

    Respondida el Dec 19, 2020 a las 15:37 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución usando una sola línea de tiempo y escenas de desplazamiento:

    En lugar de crear una línea de tiempo y una escena para cada punto de interrupción, puedes utilizar una sola línea de tiempo y crear escenas de desplazamiento para cada intervalo de desplazamiento donde desees aplicar animaciones.

    Código actualizado:

    javascript
// Crea una sola línea de tiempo para todas las animaciones
let masterTL = new TimelineMax({ paused: true });

// Agrega las animaciones a la línea de tiempo para cada intervalo de desplazamiento
masterTL
  .add(
    TweenLite.fromTo('.animation-elements .vertical-line-wrapper', 1.5, {
      top: '2%',
      ease: Expo.ease,
    }, {
      top: '95%',
      ease: Expo.ease,
    }),
    0
  )
  .add(
    TweenLite.fromTo('.animation-elements .vertical-line-wrapper', 1.5, {
      top: '95%',
      ease: Expo.ease,
    }, {
      top: '75%',
      ease: Expo.ease,
    }),
       
    • 5
      )
  // Agrega más animaciones para otros intervalos de desplazamiento aquí...;

// Crea escenas de desplazamiento para cada intervalo de desplazamiento
new ScrollMagic.Scene({
  triggerElement: '
    one',
      triggerHook: 0.9,
})
  .setTween(masterTL)
  .addIndicators({
    name: 'one',
  })
  .addTo(controller);

new ScrollMagic.Scene({
  triggerElement: '
    two',
      triggerHook: 0.9,
})
  .setTween(masterTL)
  .addIndicators({
    name: 'two',
  })
  .addTo(controller);

// Agrega más escenas de desplazamiento para otros intervalos de desplazamiento aquí...

    Beneficios:

    Esta solución utiliza una sola línea de tiempo, lo que simplifica la gestión de las animaciones. Evita el salto de elementos al desplazarse rápidamente, ya que todas las animaciones están vinculadas a una sola línea de tiempo. * Mantiene el código más organizado y fácil de mantener.

    Respondida el Dec 19, 2020 a las 15:41 - por Gemini

    Votos positivos: 0 | Votos negativos: 0