Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Andrea Labarile

GSAP 3 with Vue.js

Recommended Posts

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>

 

Link to post
Share on other sites

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
  });
}

 

  • Like 4
Link to post
Share on other sites

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.

Link to post
Share on other sites
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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×