Benjamin Hutter

I have a Nuxt 3 project that calls videos with titles from an api. But it only loads 10 videos at a time until the user clicks the "Load more" button to get another 10 videos. For this I have set up the following, so that the video items get a small scroll animation. Also, all FadeIn CSS classes have their own starting value of zero opacity. import gsap from 'gsap' import { ScrollTrigger } from "gsap/ScrollTrigger" import useEventsBus from "~~/composables/eventBus" const { bus } = useEventsBus() watch(() => bus.value.get("newContent"), () => { ScrollTrigger.refresh() }) const main = ref() const ctx = ref() onMounted(() => { initTimeline() }) const initTimeline = () => { ctx.value = gsap.context(() => { const sections = gsap.utils.toArray(".FadeIn") sections.forEach(section => { const animation = gsap.to(section, { opacity: 1, translateY: 0, ease: "power2.out", duration: 1, paused: true, invalidateOnRefresh: true }) ScrollTrigger.create({ trigger: section, scroller: "div.Scroller", start: "top 80%", onEnter: () => animation.play() }); ScrollTrigger.create({ trigger: section, scroller: "div.Scroller", start: "top bottom", onLeaveBack: () => animation.pause(0) }) }) }, main.value) } onUnmounted(() => { if (ctx.value) ctx.value.revert() }) My problem is that Scrolltrigger.refresh() does not work when I get new items provided by the api. This means that the scroll animation for the new items is not there, but only static.