Estoy intentando animar un círculo de donas svg con gsap. Después de muchas pruebas con código y capas, me quedé perplejo con un efecto de desplazamiento con fallas (que traté de resolver con eventos de puntero) y el origen de transformación solo se aplica a algunas de las pestañas expandidas. Me pregunto si esto podría ser que las pestañas pueden tener un cuadro delimitador diferente.

Comentarios agregados por solicitud:

Nota al margen: he intentado aplicar el cuadro de relleno a todo svg en su lugar, me pregunto si necesito una capa principal que sea un cuadrado exacto para poder aplicar el origen de transformación para las "pestañas desplegables" secundarias en el centro de eso?

Supuse que necesitaba iterar a través de una matriz de ambos para que las pestañas se correspondan. ¿A menos que las pestañas fueran hijas unas de otras?

TLDR; Las pestañas no se escalan desde el centro del círculo y el efecto de desplazamiento falla.

Ejemplo de CodePen

 .expandtab { pointer-events: none; transform: fill-box; transform-origin: -15px 25%; }

JavaScript:

 const subTabs = gsap.utils.toArray(".subtab"); const expandTabs = gsap.utils.toArray(".expandtab"); const tl = gsap.timeline({ defaults: { duration: .05, } }); tl.set(expandTabs, { visibility: "hidden", opacity: 0, scale: 0, }); subTabs.forEach((subTab, index) => { let expandTab = expandTabs[index]; // Event Listener Hover on subTabs[index].addEventListener("mouseover", (event) => { console.log("you clicked region number " + index); tl.to(expandTab, { visibility: "visible", opacity: 1, scale: 1, }); }); // Event Listener Hover off subTabs[index].addEventListener("mouseout", (event) => { console.log("you exited region number " + index); tl.to(expandTab, { opacity: 0, scale: 0, visibility: "hidden", }); }); });