big aaron

Thank you so much, this is great help.

I was able to get it working. Moved my ref to the parent and used this.#refs.images.children, and it worked as I had hoped. Thanks for pointing me in the right direction.

I'm trying to simply fade through an array of images. I'm new to vue and gsap, so please bear with me. The error in the console says "Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()" Please correct anything you see. I picked up the project where the previous dev left off and am learning on the fly. Your help is greatly appreciated. The markup: <transition name="fade"> <div class="images"> <nuxt-picture ref="images" :placeholder="true" src="/images/home-face-1.jpg" alt="We believe in you." loading="lazy" width="1920" height="2280" class="min-h-[330px] h-full w-full image image-1" /> ..... The script: import gsap from 'gsap' export default { data() { return { pointer: 0, images: [ { imageUrl: '/images/home-face-1.jpg', }, { imageUrl: '/images/home-face-2.jpg', }, { imageUrl: '/images/home-face-3.jpg', }, { imageUrl: '/images/home-face-4.jpg', }, { imageUrl: '/images/home-face-5.jpg', }, { imageUrl: '/images/home-face-6.jpg', }, { imageUrl: '/images/home-face-7.jpg', }, { imageUrl: '/images/home-face-8.jpg', }, ], } }, mounted() { console.log(this.images) gsap.to( {}, { duration: 5, repeat: -1, onRepeat: () => { this.pointer = this.rotateImages(this.images, this.pointer) }, } ) }, methods: { rotateImages(imgs = [], currentPointer = 0) { let pointer = currentPointer if (imgs !== []) { const current = pointer pointer += 1 if (pointer === imgs.length) pointer = 0 console.log(this.images) gsap.to(imgs[current], { duration: 1, autoAlpha: 0 }) gsap.to(imgs[pointer], { duration: 1, autoAlpha: 1 }) } return pointer }, }, } ImageRotator.vue