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-clockwise by 70 degrees.
Trigger 2: Rotate object from the current 70 degrees to 90 degrees.
Trigger 3: Rotate object from 90 degrees to 360 degrees.
Trigger 4: Rotate object from 360 degrees to 430 degrees.
Trigger 5: Rotate object from 430 degrees to 450 degrees.
Trigger 6: Rotate object from 450 degrees to 720 degrees.
I could use Camtasia to make mini-animations and use the triggers to change states, moving from one animation to the next, but I'm curious if there is a way to do it in Storyline...
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!
There is a second option. It is a bit more complex, but it will be more visually interesting. You can use JS and the GSAP library. This will be a bit more technically challenging but can give you additional advantages in animating objects.
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 });
Thanks for your reply. However, I don't quite get it... I copied the code and made a trigger to execute javascript when the shape is clicked. In the preview mode, nothing happens when I click the shape...
It took some digging to find the object reference, but I could finally do it. Great solution, thanks!
How do you find the object reference?
You need to find the object ID, Review my e-learning have a simple chrome plugin (free) that can help with this.
Will this work if the object I want to rotate is actually a group of objects? How do I find the object ID of a group?
Learning Dojo has a good video about this on YouTube. I could rotate a group by scrolling higher through the code to find the object reference.
Custom Storyline Animations Made Easy
