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>