JavaScript Tricks for Articulate Storyline 3/360 show/hide menu

To make elements invisible in Storyline360 you can use GSAP code. As GSAP is built into Storyline360 its the easiest way to animate elements. And offcourse simply hide them.

let hamburger = document.querySelector("#hamburger > div");
gsap.set(hamburger, { autoAlpha:0 });

To show the hamburger menu icon again you can add this to a button...

let hamburger = document.querySelector("#hamburger > div");
gsap.to(hamburger, {duration:1.5,autoAlpha:1});

In GSAP set directly sets values and to animates them over time

Remember this only works in Storyline360 as the GSAP Javascript library is built in.

To do the same in Storyline3 you can change the style of the element. Like this.

let hamburger = document.querySelector("#hamburger > div");
hamburger.style.display = 'none';

And to show it again on a button...

let hamburger = document.querySelector("#hamburger > div");
hamburger.style.display = 'block';