Hi I use gsap and bootstrap Each version is gsap 3.9.1 and bootstrap 5.1.3 My problem is that the end of the scroll trigger does not work properly.

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()
    }
  })

If I change end: 'bottom' to end: 999999 it works properly, but I can't use end: 999999 because I want the scroll to work only when it's at the top.

What I don't understand is that if i erase the bootstrap from the cdn, end: 'bottom' works well.

That's why I think bootstrap and gsap scroll trigger's end cause conflict.

This is the code that I experimented with.

<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>

I wonder if this collision only occurs to me or if the version is wrong. If you don't have enough explanation, please let me know. I'll add an explanation.

Thank you for your help.