Question:
How can I animate the content of a custom MultiState-Box ? Nothing seems to work.
Product:
Wix Studio, Velo, Multistate-Box
What I’m trying to achieve:
Hello, I’m trying to get a Custom Accordion to animate on my website -It’s the last one with the “@”. I made it thanks to the MultiState-Box element, I successfully added the Velo code to make the Accordion work as intended, but when I try to animate it’s content, it doesn’t work, with one solution, it makes the whole content disappear.
What I have already tried:
- Using CSS Values to set the transition time, so any transformations of the element get animated. Does not work.
- Using the Built in “Enter” animations on the content : Makes the animated content disappear in viewport. Does not work.
Edit :
- Recreating the element without MultistateBox and making it work thanks to Velo code only seems to work, but even GPT-4 cant find a way to animate the expansion of a collapsed section/element.
Additional information:
Some accordions elements are already available in the “add menu” but they are too basic. BUT somehow Wix succeeded to animate them.
The code I’m using:
function toggleFold(index) {
let $fold = $w('#fold' + index);
let $arrowDown = $w('#arrowDown' + index);
let $arrowUp = $w('#arrowUp' + index);
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowUp.hide();
}
else {
$fold.collapse();
$arrowDown.hide();
$arrowUp.show();
}
[6]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#fold' + idx).collapse();
$w('#arrowDown' + idx).hide();
$w('#arrowRight' + idx).show();
})
}
export function headerBox6_click(event) {
toggleFold(6);
}