缩放动画也可以翻译gsap

问题描述

我有一个svg，我希望其中四个元素可以弹出。我正在使用gsap尝试此操作，但它们看起来好像已经飞入原位。这是我正在为此使用的代码

        gsap.fromTo(
            '#ide,#html,#handlebar,#search',1.5,{
                scale: 0,},{
                scale: 1,yoyo: true,ease: 'none',repeat: -1,}
        );

还请检查codepen的当前工作版本：https://codepen.io/prateekkarki/pen/oNxEZxo

我不希望他们从右飞，我只是希望他们从原始位置扩大。如何在GSAP中实现这一目标，请帮忙。

解决方法

只需删除影响转换的CSS：

#ide,#html,#handlebar,#search {
  transform-origin: top center;
  transform-box: fill-box;
}

Demo。

仅供参考，您更有可能在the GSAP forums上获得更快的响应。