singlexyz

Ah Yeah, That's it. Super thanks.

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

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

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?

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...

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

codepen

XD