Jump to content
Search Community

GSAP Flip help (Vue, Tailwind)

Zync test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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 by Zync
Adding keywords and tags for search
Link to comment
Share on other sites

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

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Zync changed the title to GSAP Flip help (Vue, Tailwind)

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.
×
×
  • Create New...