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:
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.
- SamHill2 years agoSuper Hero
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);- ThierryEMMANUEL2 years agoCommunity Member
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.
- ThierryEMMANUEL2 years agoCommunity Member
Hi VicovandenEv121 . The beauty of this code is its small size. I thought I had solved the problem of preventing the rotation from starting from an intermediate position when the user clicks again before the animation is finished, by creating a variable (rotationDegree) stored in the window object, which allows it to persist between executions without resetting. Actually, chapGPT did it. Here is the modified code:
window.rotationDegree = (window.rotationDegree || 0) - 90;
let object1 = document.querySelector("[data-model-id='6nmK88deM2z']");
gsap.to(object1, { rotation: window.rotationDegree, duration: 1 });
It works for the first object! But since I want to target multiple objects, the objects share the same rotationDegree variable in their code and their first rotations are at first heretical. I guess it is normal. I'm still looking. (This is the last time I'll ask you if you don't have time. You've already earned your beer anyway.)- VicovandenEv1212 years agoCommunity Member
Hi ThierryEMMANUEL I'll have the Trappist Westvleteren 12 🍺
- ThierryEMMANUEL2 years agoCommunity Member
Is this your country? VicovandenEv121
One of the 12 Trappist beers in the world, you're a connoisseur. Looks like we're talking more about beer than Javascript in this thread.😀
Related Content
- 2 years ago
- 7 months ago
- 2 years ago
- 2 years ago
- 2 years ago