Forum Discussion
Rotating a shape 90° shouldn't be too complicated but...
Hello community members. A few words of context: for my latest entry in the e-learning challenge #482, I needed to rotate a rectangle by 90°, several times. I used good old motion trajectories, with...
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 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:
Hello everyone. Even though the question is “solved”, the bar remains open if anyone wants to show another solution.
Hi SamHill Thank you very much. The JS code works exactly as I expected. I rushed through the .story file before watching your video (I will), and it is indeed super easy to make adjustments with the internal variables. I've already modified the duration, degrees of rotation and direction of rotation, for example. The only thing I'm going to try is to change the shape selection by its data-model-id (I learned how to get it in the debugging console), so as to leave the accessible text free to be changed if need be. And I'm going to duplicate this code 24 times for 24 shapes to recreate my rotating puzzle activity.
Let's talk about beer. Pietra comes from Corsica (part of France, in fact) but I'm not sure it's the most expensive. I suggest an organic craft beer produced by friends in the Dordogne (central-western France), a beautiful region renowned for its gastronomy. It's called “La Lutine” and my favorite is amber and tastes of hops and friendship.
make a Trigger that Executes Javascript on click of the object, paste in the Javascript:
let object1 = document.querySelector("[data-model-id='6nmK88deM2z']");
gsap.to(object1, { rotation: "+=90", duration: 1 })Find the ID of the object and paste that in.... READY ;) you can use it on multiple objects on your slide without changing "object1"
Wow! Shorter seems harder, and it works perfectly VicovandenEv121 In that case, I'd be happy to buy you a beer too. There's just one little problem: if you click again before the end of the rotation (1s), the angle less than 90° is added to the next and the rectangle is shifted (minus 180°, minus 270°, minus 360°, etc). I think there's a solution to this problem in Sam's code, with the line let rotationdegree = 0. I'll try to fix this problem tomorrow morning. But any ideas are welcome. Many many thanks. For me, it's late and time for a drink.
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);
