缩放动画也翻译 gsap

Question

我有一个 svg，我希望其中的四个元素在适当的位置弹出。我正在用 gsap 尝试这个，但它们看起来像是飞到位了。这是我为此使用的代码

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

请同时检查 codepen for current working version: https://codepen.io/prateekkarki/pen/oNxEZxo

我不希望他们从右边飞，我只希望他们从原来的位置按比例放大。我怎样才能在GSAP中实现这一点，请帮助。

Answer 1

只需删除影响转换的 CSS：

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

Demo.

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

缩放动画也翻译 gsap

Scale animations also translating gsap

javascript

css

css-animations

gsap