[Invalid property autoAlpha set to 0 Missing plugin?]

Thank you so much, this is great help. 

[Invalid property autoAlpha set to 0 Missing plugin?]

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.

[Invalid property autoAlpha set to 0 Missing plugin?]

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