CODEWITHSUNDEEP
javascriptcsscss-animationsgsap
Prateek
Prateek

Reputation: 854

Scale animations also translating gsap

I have an svg, and I want four of the elements to pop up in place. I am trying this with gsap but they look like they are flying into place. Here's the code I am using for this

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

Please also check the codepen for current working version: https://codepen.io/prateekkarki/pen/oNxEZxo

I don't want them flying from right, I just want them to scale up from their original position. How can I achieve this in GSAP, please help.

Upvotes: 0

Views: 781

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25974

Just remove your CSS that's affecting the transforms:

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

Demo.

FYI you're more likely to get a faster response on the GSAP forums.

Upvotes: 1

Related Questions