GSAP Flip help (Vue, Tailwind)

[Zync 19 Likes (Newbie)]

Hi all,

 

Been trying to get a Vue with Tailwind implementation of the Flex Box example going for a couple of hours now but can't seem to make any headway on it. I must be missing something really simple but it just won't animate the flipping even though I'm just toggling 1 class. Any help would be greatly appreciated. Code is below.

 

<template>

  <div class="flex w-screen h-screen group" @click="toggleDirection()" :class="{ 'flex-col' : col_mode }">

    <div class="grid flex-1 text-5xl text-white bg-red-600 box place-items-center">1</div>

    <div class="grid flex-1 text-5xl text-white bg-blue-600 box place-items-center">2</div>

    <div class="grid flex-1 text-5xl text-white bg-green-600 box place-items-center">3</div>

    <div class="grid flex-1 text-5xl text-white bg-yellow-300 box place-items-center">4</div>

  </div>

</template>

 

<script>

 

import gsap from 'gsap';

import { Flip } from "gsap/Flip";

 

export default {

  name: 'Home',

  data() {

    return {

      col_mode: false,

      state: null

    }

  },

  mounted () {

    gsap.registerPlugin(Flip);

    

  },

  methods: {

    toggleDirection() {

      this.state = Flip.getState('.group, .box');

 

      this.col_mode = !this.col_mode

 

      Flip.to(this.state, {

        absolute: true,

        duration: 1,

        stagger: .2

      })

    }

  },

}

</script>

Edited July 4, 2021 by Zync
Adding keywords and tags for search

[Trapti 177 Likes (Specialist)]

It is difficult  to see problem this way. It would be helpful if you can create a demo in Codepen. 

this line does not seem right to me, you are targeting all the box inside the group it should be ".group .box". 

Flip.getState('.group, .box');

 

[OSUblake 18,475 Likes (Superhero)]

Hi Zync!

 

Frameworks don't render changes synchronously. You have to wait for Vue to apply the changes.

 

 

[Zync 19 Likes (Newbie)]

Thank you OSUblake,

 

I knew I was missing something completely. Thanks for your help. 

[Zync 19 Likes (Newbie)]

7 hours ago, Trapti said:

It is difficult  to see problem this way. It would be helpful if you can create a demo in Codepen. 

this line does not seem right to me, you are targeting all the box inside the group it should be ".group .box". 

Flip.getState('.group, .box');

 

 

I would have created a codepen but unfortunately I don't really know how to create one with Vue single file components. Still getting the grasp of that. Sorry

[Zync 19 Likes (Newbie)]

For anyone coming back to this later on. Finally figured out Vue single file components on Codepen.

 

Here is the sample with GSAP, GSAP Flip + Vue and Tailwind.

 

See the Pen WNjQMGN by zync09 (@zync09) on CodePen