Jump to content
Search Community

Animate Display with GSAP Flip

momo12 test
Moderator Tag

Recommended Posts

Hi guys,

1- I have a question. How I can animate the display property of the floating wrapper using GSAP Flip? It changes without any effect and not interesting. I tried GSAP.From and To but still get the same result. 

 

2- Also, am I doing something wrong regarding hiding the Floating wrapper? I want the previous animation I got without animating the Display property of the Floating wrapper be visible. Right now, the image moves from one parent to another parent without animation becasue of animating the Displat attribute of the Floating Wrapper.

I did something but honestly, found the documentation of GSAP Flip a bit hard! Thanks

See the Pen RwyMgxj by talewoy290 (@talewoy290) on CodePen

Link to comment
Share on other sites

Hi @momo12,

 

I'm not sure I fully understand what you're trying to do. Does this works the way you intend?:

function flipmax() {
  let state = Flip.getState(tt);
  def.appendChild(tt);
  float.classList.toggle("hide");
  Flip.from(state, {
    fade: true,
    scale: true,
    ease: "power3.out",
    duration: 0.5
  });
}

function flipmin() {
  let state = Flip.getState(tt);
  float.appendChild(tt);
  float.classList.toggle("hide");
  Flip.from(state, {
    fade: true,
    scale: true,
    ease: "power3.out",
    duration: 0.5
  });
}

I updated the codepen example from the previous thread you created about this to toggle the hide class from the floating element:

function flip() {
  let state = Flip.getState(tt);
  float.classList.toggle("hide");
  reparent ? parent.appendChild(tt) : float.appendChild(tt);
  tl = Flip.from(state, {
    scale: true,
    ease: "power3.out",
    duration: 0.5
  });
  reparent = !reparent;
}

See the Pen yLjKPEm by GreenSock (@GreenSock) on CodePen

 

Let us know if you have any other questions.

 

Happy Tweening!

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