How to specify different configs for fade in Flip Animation

[singlexyz]

const state = Flip.getState(".small, .large");
document.body.classList.toggle("active");
Flip.from(state, {
  // how to use different ease/duration/delay for opacity
  fade: true, 
  absolute: true,
  ease: "expo.inOut",
  duration: 0.5,
  zIndex: 10,
});

 

See the Pen RwOzPYG?editors=0010 by nayuxuohz (@nayuxuohz) on CodePen

[Rodrigo]

It should be as simple as this:

let isFlipped = false;

function demo(ease, duration, delay) {
  const state = Flip.getState(".small, .large");
  document.body.classList.toggle("active");
  Flip.from(state, {
    absolute: true,
    ease,
    duration,
    delay,
    zIndex: 10,
    fade: true,
    onComplete() {
      isFlipped = !isFlipped;
      isFlipped ? demo("power2.out", 1, 1) : demo("power3.inOut", 0.5, 0.5);
    }
  });
}

demo("power3.inOut", 0.5, 0);

Hopefully this helps.

Happy Tweening!

[singlexyz]

3 hours ago, Rodrigo said:

It should be as simple as this:

let isFlipped = false;

function demo(ease, duration, delay) {
  const state = Flip.getState(".small, .large");
  document.body.classList.toggle("active");
  Flip.from(state, {
    absolute: true,
    ease,
    duration,
    delay,
    zIndex: 10,
    fade: true,
    onComplete() {
      isFlipped = !isFlipped;
      isFlipped ? demo("power2.out", 1, 1) : demo("power3.inOut", 0.5, 0.5);
    }
  });
}

demo("power3.inOut", 0.5, 0);

Hopefully this helps.

Happy Tweening!

Hi, thank you for your reply.

I may have caused some confusion because I wrote the English in translation.

 

What I actually want is to specify different ease and duration for the opacity within it.

 

After reviewing the documentation, I found a method in a demo that allows passing custom parameters.

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

  let customVars = {
    x: { ease: "power3.in", delay: 1, duration: 1 },
    y: { ease: "power1" }
  };

  Flip.from(state, {
    duration: 2,
    custom: customVars
  });