Custom Bounce with an attr: {cy: <delta>}

[MichaelGaddis]

Simple question, (I hope) I want to have a bounce on an object I'm moving inside a (rather complex) SVG. The drop looks like this:

 

Does the CustomBounce ease work with an SVG attr delta on a cy value? For instance: (The stones moves where it's suppose to but it doesn't bounce.)

Ifv it should work on an attr: cy move then I have a bug and I'll search for that... Thanks in advance

 

import { CustomEase } from "gsap/CustomEase";

import { CustomBounce } from "gsap/CustomBounce";

 

gsap.registerPlugin(CustomEase);

gsap.registerPlugin(CustomBounce);

 

CustomEase.create("gameDiskBounce2", "M0,0 C0,0 0.103,0.819 0.228,1 0.273,1.066 0.231,0.928 0.312,0.928 0.354,0.928 0.35,0.91 0.388,0.976 0.403,1.003 0.418,1 0.468,1 0.524,1 0.509,1 0.556,1 0.596,1 1,1 1,1");

 

bunch of code...

 

gsap.to(this.stoneDOMRef, {attr: {cy: RowSVGCyArray[row - 1]}, ease: "gameDiskBounce2", onComplete: ()=> { this.updateStoneLocation(callbackWhenAnimationCompleted, column); }});

[Cassie]

Hey there ☺️ Yep, the value being animated doesn't have any impact on whether an ease is working.

 

Minimal demo if you need more help please! It's hard for us to debug without seeing the whole picture.

 

Thanks so much.

[MichaelGaddis]

Thanks, you answered my question. It’s a bug somewhere else.