Hola yo uso gsap y bootstrap Cada versión es gsap 3.9.1 y bootstrap 5.1.3 Mi problema es que el final del scroll trigger no funciona correctamente.

 const navbarani = gsap.from('.navbar', { yPercent: -100, paused: true, duration: 0.5 }).progress(1) ScrollTrigger.create({ start: 'top top', end: 'bottom', onUpdate: (self) => { self.direction === -1 ? navbarani.play() : navbarani.reverse() } })

Si cambio end: 'bottom' a end: 999999, funciona correctamente, pero no puedo usar end: 999999 porque quiero que el desplazamiento funcione solo cuando está en la parte superior.

Lo que no entiendo es que si borro el bootstrap del cdn, end: 'bottom' funciona bien.

Es por eso que creo que bootstrap y gsap scroll trigger causan conflicto.

Este es el código con el que experimenté.

 <template> <div class="navbar">I'm navbar</div> <div class="blank" /> </template> <script> import { onMounted } from 'vue' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export default { setup () { onMounted(() => { const navbarani = gsap.from('.navbar', { yPercent: -100, paused: true, duration: 0.5 }).progress(1) ScrollTrigger.create({ start: 'top top', end: 'bottom', onUpdate: (self) => { self.direction === -1 ? navbarani.play() : navbarani.reverse() } }) }) } } </script> <style> .navbar { position: fixed; } .blank { height: 150vh; } </style>

Me pregunto si esta colisión solo se me ocurre a mí o si la versión es incorrecta. Si no tiene suficiente explicación, por favor hágamelo saber. Añadiré una explicación.

Gracias por tu ayuda.