Am getting a issue here
return (
<Box
display='flex'
flexDirection='column'
>
<Box display='flex'>
<Button
onClick={() => {
lstore.open = !lstore.open;
const domNode = lstore.collabeRef.current;
const h = lstore.open ? domNode.scrollHeight : 0;
if (lstore.open) {
// if proceed opening
gsap.to(domNode, 0.3, { height: h, opacity: 1 })
.eventCallback('onComplete', () => {
domNode.style.height = '100%';
});
} else {
// here the issue, if node have with 100% , animations not work
// i also try From and domNode.style.height = domNode.scrollHeight+'px' not work
gsap.to(domNode, 0.3, { height: 0, opacity: 0 });
}
gsap.fromTo(domNode, 0.5, { translateX: -100 }, { translateX: 0 });
}}
>
{title}
</Button>
</Box>
<Box
ref={lstore.collabeRef}
>
{children}
</Box>
</Box>
);
after the event onComplete fired
the following code `gsap.to(domNode, 0.3, { height: 0, opacity: 0 });` no longer works and there are no more animations.
how i can animate height 100% to 0% or 0px ?
i also try hacky way like just before perform this domNode.style.height = domNode.scrollHeight+'px'
just before the animations , but not work !
thanks