Spinning an SVG shape inside of an svg logo
Hello and apologizing up front, first time posting here ?. Also my first foray into GSAP keep that all in mind.
Trying to animate a shape path in an svg logo; attached pen is not the actual logo but it does include a triangle in the real wild
I'm wanting to use GSAP3 to just slowly 'spin' the triangle; not rotate it. I included more below if you scroll down to what I'm hoping I can make it look like with a regular just css animation as a demo.
THANK YOU ahead of time for
Welcome to the forum.
You can't use 3D transforms on SVG child elements like that, but you can fake the rotation with a scaleX animation.
gsap.to(".yellow-triangle", {
duration: 1.5,
scaleX: 0,
transformOrigin: "50% 50%",
repeat: -1,
yoyo: true
});
See the Pen OJPpaZq by PointC (@PointC) on CodePen
Happy tweening and welcome aboard.
