Масштабные анимации, также переводящие gsap

#javascript #css #css-animations #gsap

#javascript #css — файл #css-анимации #gsap #css

Вопрос:

У меня есть 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, пожалуйста, помогите.

Ответ №1:

Просто удалите свой CSS, который влияет на преобразования:

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

ДЕМОНСТРАЦИЯ.

К вашему сведению, вы, скорее всего, получите более быстрый ответ на форумах GSAP.

Комментарии:

1. Спасибо, это было очень полезно