GSAP 3 with Vue.js

[Andrea Labarile 0 Likes (Newbie)]

Hi! First time using GSAP 3 and first time using Vue. I'm definitively doing something wrong. I'm trying to apply a simple animation in a Vue component but it doesn't work and the console shows a warning saying I am missing a register plugin? What am I doing wrong? 

 

I also tried to force CSSPlugin but without success.
 

<template>
  <section class="container">
    <div class="row">
      <div class="col-12">
        <div class="card" v-for="card in cards" :key="card.id">
          <div class="card-inner" @click="simpleFade()">
            <div class="card-name">{{ card.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import { gsap } from 'gsap';
  import { CSSPlugin } from 'gsap/CSSPlugin'
  gsap.registerPlugin(CSSPlugin);

  const myCards = [
    {
      id: 0,
      name: 'Prima carta',
    },
    {
      id: 1,
      name: 'Seconda carta',
    },
    {
      id: 2,
      name: 'Terza carta',
    },
    {
      id: 3,
      name: 'Quarta carta',
    }
  ];

  export default {
    name: 'TarocchiCards',
    data() {
      return {
        cards: myCards,
      };
    },
    methods: {
      simpleFade(){
        gsap.fromTo(this,{autoAlpha:1},{autoAlpha:0, duration: 0.35});
      }
    },
  }
</script>

 

[OSUblake 18,471 Likes (Superhero)]

You don't need to import the CSSPlugin.

 

this is not the element. You need to get a ref to the element being clicked.

 

<div class="card" 
     v-for="(card, i) in cards" 
     :key="card.id" 
     ref="cards" 
     @click="simpleFade(i)">
  <div class="card-inner">
    <div class="card-name">{{ card.name }}</div>
  </div>
</div>

 

simpleFade(i) {
  gsap.fromTo(this.$refs.cards[i], {
  	autoAlpha: 1
  }, {
    autoAlpha: 0,
    duration: 0.35
  });
}

 

[takuan 0 Likes (Newbie)]

Another way to get the element is on the event passed to the click handler:

 

<template>
  <section class="container">
    <div class="row">
      <div class="col-12">
        <div class="card" v-for="card in cards" :key="card.id" @click="simpleFade">
          <div class="card-inner">
            <div class="card-name">{{ card.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import { gsap } from 'gsap';
  import { CSSPlugin } from 'gsap/CSSPlugin'
  gsap.registerPlugin(CSSPlugin);

  const myCards = [
    {
      id: 0,
      name: 'Prima carta',
    },
    {
      id: 1,
      name: 'Seconda carta',
    },
    {
      id: 2,
      name: 'Terza carta',
    },
    {
      id: 3,
      name: 'Quarta carta',
    }
  ];

  export default {
    name: 'TarocchiCards',
    data() {
      return {
        cards: myCards,
      };
    },
    methods: {
      simpleFade(event){
        gsap.fromTo(event.target, {autoAlpha:1},{autoAlpha:0, duration: 0.35});
      }
    },
  }
</script>

Notice the parens are removed in the @click in the template. If you need to pass another variable, I think you need to pass the event parameter explicitly.

[OSUblake 18,471 Likes (Superhero)]

Hi @takuan

 

You don't need to import the CSSPlugin.

 

And using the event target is a VERY BAD idea. Click on different parts of the card, like the text, blue box, and background to see the problem.

 

See the Pen 733e84ae4f6b4b19c53145fcd58f15fd by osublake (@osublake) on CodePen

 

 

 

[ZachSaucier 7,123 Likes (Superhero)]

3 hours ago, OSUblake said:

using the event target is a VERY BAD idea. Click on different parts of the card, like the text, blue box, and background to see the problem.

Not the best idea, no. But if you use .closest() you can fix errors like that.

[OSUblake 18,471 Likes (Superhero)]

Yes, but you can't do that to remove items in vue.

 

 

See the Pen 09fc5b202498128b52b3834119d3510c by osublake (@osublake) on CodePen