[How to specify different configs for fade in Flip Animation]

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

[How to specify different configs for fade in Flip Animation]

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

[How to use elastic ease with the same target value.]

2 hours ago, PointC said:

Sounds like you're looking for CustomWiggle.

 

 

 

 

It's a perk for Club GreenSock members.

 

Happy tweening.

 

 

Ah Yeah, That's it. Super thanks.

[How to use elastic ease with the same target value.]

Is it possible, when using elastic ease, that the start value and the target value are the same, but still have an elastic wiggle.

 

gsap.fromTo(graph, { y: 0 }, { y: 0, ease: "elastic.out(1, 0.2)" });

[I want the scrolling to be slowed in order to make animation last long]

make the scale to a small value, or make a long distance.

[How to animate css multiple value but different ease？]

css clip-path property has multiple values in a declaration.

 

.el { clip-path: inset(10% 20%); }

 

like above, how to animate 10%part and 20% part in  different ease or duration ?

 

just like 10% use 1s duration, and 20% use 2s.

 

I could and a parent element, then animate with child same time.

or animate two object then update the clip-path.

 

but has any function built-in can do that? 

See the Pen WNGBVzE by nayuxuohz (@nayuxuohz) on CodePen

[The counter-transform animation in GSAP]

Hi, friends. I found out a animation way: https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse

 

They call it  counter-transform, the parent element scale down, and the child element scale up

it can make a smooth animation to change to different aspect ratio.

 

But the question is, because the parent and child element scale in SAME time

so the timing function can't be use regular, in article above, they use javascript to generator css keyframes animation.

 

Then I thought of ExpoScaleEase, I use it on code，like:

timeline
	.fromTo(container, { scaleX: 1 }, { scaleX: delta.scaleX, ease: `expoScale(1, ${delta.scaleX})` })
	.fromTo(container, { scaleY: 1 }, { scaleY: delta.scaleY, ease: `expoScale(1, ${delta.scaleY})` }, '<')
	.fromTo(image, { scaleX: 1 }, { scaleX: 1 / delta.scaleX, ease: `expoScale(1, ${1 / delta.scaleX})` }, '<')
	.fromTo(image, { scaleY: 1 }, { scaleY: 1 / delta.scaleY, ease: `expoScale(1, ${1 / delta.scaleY})` }, '<')

 

The parent and child is actually  doing animation

But their animations neutralize each other, Looks no animation

 

Can gsap had the ease plugin to solve it now?

generate css keyframes animation is so...

 

See the Pen yLOoZEm by nayuxuohz (@nayuxuohz) on CodePen

[Responsive Animation, The reverse() is AWESOME!]

Make the FLIP animation like a boss 😉 Check in new window.

See the Pen eYpYEQy by nayuxuohz (@nayuxuohz) on CodePen

[how can i add empty time in timeline?]

codepen

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

[does this pen has any performance problem?]

XD

See the Pen LyeOJL?editors=0110 by nayuxuohz (@nayuxuohz) on CodePen