Forum Discussion
Rotate object trigger
Hi All, I'm looking for a way to rotate an object with a trigger, but it's a little more complicated than just the standard animation. It would look like this: Trigger 1: Totate object counter-cloc...
The code in GSAP will be as simple as possible. You need to find the desired object (the one you want to rotate), and it's best to do this by the object's ID.
Then, you create the animation. For example, a rotation of 90 degrees will look like this:
gsap.to(yourObject, { rotation: 90, duration: 1 });
A more interesting animation, where the object slightly tilts in the opposite direction and then rotates 90 degrees, will look like this:
gsap.to(yourObject, { rotation: -30, duration: 0.5, ease: "power2.out" }) gsap.to(yourObject, { rotation: 120, duration: 0.5, ease: "power2.out", delay: 0.5 });
Yep! 'Convert to Dial', set its state to disabled (so it can't be turned manually), and then use triggers to change the underlying variable - and thus also change its position.
If you set the dial to 360 degree radius with 360 steps, a quarter turn right would be 90, a quarter turn left would be 270.
I like the convert to dial option - I'd never noticed that before! But my problem is that my object is actually a group of objects. And when I rotate it using the dial, it doesn't rotate around the ceter of the group. Any thoughts on how to fix this?
becomes this!
