Invalid property autoAlpha set to 0 Missing plugin?

[big aaron]

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

[OSUblake]

Welcome to the forums @big aaron

 

this.images is an array of JavaScript objects for the urls. Your animations need to target the actual image elements. If you can make a minimal demo we can look at it. You can fork this CodeSandbox. Just make it as basic as possible. 

 

https://codesandbox.io/s/gsap-nuxt-starter-r5lkg

 

[big aaron]

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.

[OSUblake]

So like I was saying, you need to target the elements. nuxt-picture is a component, so the actual element would be $el on the ref object. And I'm assuming you were wanting a v-for for the images.

 

https://codesandbox.io/s/vue-gsap-image-rotator-forked-1jxi5u?file=/pages/index.vue

[big aaron]

Thank you so much, this is great help.