Hi everyone, I have been wrecking my brain on how to create a hamburger menu on a desktop site and haven’t come up with anything easier then to build it myself. However, in the process of designing an animation I stumbled upon what I think is a bug… I wanted to do an animation whereby when you click on a square hamburger button a bunch more squares “fold” out of it one by one (4 in total) and then a larger one folds out from right to left with the menu links. at the same time the menu button is hidden and a close button is revealed in its place.
to cut the long story short I can successfully fold out the menu with the following code:
//Fold Out Animation Options
let foldOptionsTop1 = {
"direction" : "top",
"duration" : 300,
"delay" : 0,
}
let foldOptionsTop2 = {
"direction" : "top",
"duration" : 250,
"delay" : 300,
}
let foldOptionsTop3 = {
"direction" : "top",
"duration" : 200,
"delay" : 550,
}
let foldOptionsTop4 = {
"direction" : "top",
"duration" : 150,
"delay" : 750,
}
let foldOptionsRight1 = {
"direction" : "right",
"duration" : 1000,
"delay" : 900,
}
export function menuBtn_click(event) {
$w('#menuBtn').hide()
$w('#closeBtn').show()
$w("#bm1").show("fold", foldOptionsTop1);
$w('#bm2').show("fold", foldOptionsTop2);
$w('#bm3').show("fold", foldOptionsTop3);
$w('#bm4').show("fold", foldOptionsTop4);
$w('#bm5').show("fold", foldOptionsRight1);
}
Then I have the following code for the reverse animation where everything just folds back up:
// FOLD IN Animation Options
let foldOptionsLeft1 = {
"direction" : "left",
"duration" : 1000,
"delay" : 0,
}
let foldOptionsBottom1 = {
"direction" : "bottom",
"duration" : 300,
"delay" : 1000
}
let foldOptionsBottom2 = {
"direction" : "bottom",
"duration" : 250,
"delay" : 1300
}
let foldOptionsBottom3 = {
"direction" : "bottom",
"duration" : 200,
"delay" : 1550
}
let foldOptionsBottom4 = {
"direction" : "bottom",
"duration" : 150,
"delay" : 1750
}
export function closeBtn_click(event) {
$w('#menuBtn').hide();
$w('#closeBtn').show();
$w("#bm5").show("fold", foldOptionsLeft1);
$w('#bm4').show("fold", foldOptionsBottom1);
$w('#bm3').show("fold", foldOptionsBottom2);
$w('#bm2').show("fold", foldOptionsBottom3);
$w('#bm1').show("fold", foldOptionsBottom4);
}
however, on the reverse animation the “fold” animation is NOT triggered - instead the preview uses the “flip” animation…
I have tried to recreate this on a fresh site that I created and behavior is exactly the same… can someone please confirm that this is a bug or am I doing something wrong?
Thanks in advance!