Jump to content
Search Community

Andrea Labarile

Members
  • Posts

    1
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Andrea Labarile's Achievements

0

Reputation

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