Good morning.
I start with GSAP and try to make an animation for my input to return to the initial position that I enter in the css.
function Pannel({className, open, children}) { const [Isopen, setIsopen] = React.useState(false);
React.useEffect(() => {
var input = document.querySelectorAll('.pannel__input');
console.log(input)
console.log(open)
if (open == true) {
TweenMax.staggerTo(input, 1, {left:0, ease: "power2.easeout"}, 0.2);
} else if (open != Isopen) {
TweenMax.staggerFrom(input, 0.4, {left:0, ease: "power2.easeout"}, 0.2);
}
setIsopen(open);
}, [open]);
return (
<div className={className + " " + (Isopen? "open" : "close")}>
{children}
</div>
)
I start to made a staggerTo that allow to my input to appear on the screen. After clicking on a button I made a staggerFrom and I want that staggerFrom return my input to his original position, but actually it stay at his actual position. What I must change to allow my input to desappear from the screen. The initial position can change so I can't enter raw value.
Thanks in advance.