Jump to content
Search Community

Andrea Labarile

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by Andrea Labarile

  1. 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>

     

×
×
  • Create New...