I managed to get it working using the following code, it's my first Nuxt + GSAP implementation, so feel free to correct me if I'm doing something wrong here
const main = ref()
const imageRefs = ref<Array<any>>([])
const ctx = ref()
onMounted(() => {
ctx.value = gsap.context((self) => {
const tl = gsap.timeline({
defaults: {
duration: 1,
ease: "power4.out",
}
})
tl.from(self.selector!('h1'), {
autoAlpha: 0,
y: 75,
})
}, main.value)
})
watchEffect(() => {
// Wait for all 4 imageRefs to be present
if (imageRefs.value.length === 4) {
// Reuse the main context
ctx.value.add((self: any) => {
const tl = gsap.timeline({
defaults: {
duration: 2,
ease: "power4.out",
}
}
)
tl.from(self.selector!('img'), {
autoAlpha: 0,
y: 75,
stagger: .1,
delay: .5
})
})
}
})