transformorigin gsap 1

transformorigin gsap

tl.to(needle, 5, {rotation: 360, transformOrigin:"4px 12px"});
//I measured to where the center of the needle is and got the values from width:4px height: 12px for the transformOrigin

Here is what the above code is Doing:
1. We’re creating a variable called needle and assigning it to the needle element in our HTML.
2. We’re creating a variable called needleTl and assigning it to a new TimelineMax object.
3. We’re using the to() method to animate the needle variable.
4. We’re using the rotation property to rotate the needle 360 degrees.
5. We’re using the transformOrigin property to set the center of the rotation to the center of the needle.

Similar Posts