Forum Discussion
Demo: Detective Security Leaks within 360 panorama
I used to love using 2D office layouts for creating learning activities for different course topics. Learners can explore the virtual office and learn to deal with whatever might actually happened i...
Hello, in case some of you wants to have the steps to do it :
You can zoom in and zoom out by executing 2 javascript here :
To zoom in :
var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:2 });
--> You can call the variable with any name
--> The queryselector must be All since it's the Canvas (when inspecting the module, you see that the image is "canvas")
--> Duration can be changed (1 is good for the zooming effect)
--> Scale can be changed too (2 is x2, don't do zoom too much if the quality is not high)
To zoom out :
var panoramaImg = document.querySelectorAll("canvas");
gsap.to(panoramaImg, { duration:1, scale:1 });
Like before but the scale is 1 (100% of the image)
Also, don't forget to execute the javascript with a trigger (here by clicking on the icon 1 to zoom in and on the icon 2 to zoom out)
Don't forget to change hide the icon 1 when icon 2 is normal, hide icon 2 when icon 1 is normal
Don't forget to hide the icon 1 when you click on it, hide icon 2 when you click on it
You can't do it by states (except if you have the solution, in this case, please share us !)
One thing to remember... querySelectorAll gets ALL elements of the type 'canvas' in your project. And so the variable is a HTMLCollection. If you only have one canvas element in your Storyline that will not be an issue...if you have more.. do use either querySelector to get a specific one...or just this coding to get a specific one out of a collection.
var panoramaImg = document.querySelector("canvas"); // if you have just onevar panoramaImages = document.querySelectorAll("canvas"); // if you have more//then you can select any specific on the collection like this.gsap.to(panoramaImages[1], {duration:1, scale:2 });
