Forum Discussion
Rotating a shape 90° shouldn't be too complicated but...
- 2 years ago
Hi ThierryEMMANUEL I have the solution for me, but let me know if you need any tweaks to it. This leverages the GSAP library as it is the cleanest solution. In the attached video, I explain the code, and also talk through some modifications you could make. This method also uses some Storyline variables, which may help configure the functionality from Storyline so it is a bit easier to work with for none programmers.
I'll have a Pietra please. ChatGPT reckons it's one of the most expensive in France ;)
Working file attached:
Hi ThierryEMMANUEL I've made an updated Storyline file for you. This puts the code into a function and localises the rotationDegree variable to the object. You don't need to reference the object, as we can get this information from the "event" property, which is passed through the function "rotateShape".
This code runs on timeline start.
window.rotateShape = function(e)
{
// storyline variable
const player = GetPlayer();
const rotation = player.GetVar('rotation');
const duration = player.GetVar('duration');
// get the target
const target = e.target.closest('[data-model-id]');
console.log("target",target);
// get rotationDegree if defined (default zero)
let rotationDegree = Number(target.dataset.rotationDegree) || 0;
console.log("BEFORE :: rotationDegree",rotationDegree);
// Increment rotation by 45 degrees
rotationDegree += rotation;
console.log("AFTER :: rotationDegree",rotationDegree);
// assign rotationDegree to object dataset property
target.dataset.rotationDegree = rotationDegree;
// Use GSAP to animate the rotation
gsap.to(target, { duration: duration, rotation: rotationDegree });
}
You then just call this function from the click trigger of each shape.
window.rotateShape(event);
Hi SamHill . Very impressive. With this solution, I can “recreate” my complex rotating puzzle activity in… five minutes. Immediately, I tried to change a few things. I duplicated the code starting at the top of the slide and called it “rotateShape2”. This code uses a variable “antirotation” that is set to -90 in SL. So now I have the choice of calling the function rotateShape (to rotate clockwise) or rotateShape2 (to rotate counterclockwise). I am not explaining this for you of course, but for anyone who would find it useful to know. Awesome. I think I have everything I need. Thank you very much.
Related Content
- 2 years ago
- 7 months ago
- 2 years ago
- 2 years ago
- 2 years ago