Search the Community
Showing results for tags 'jsx'.
Found 1 result
-
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
