Stagger : how to return to the the initial position

Viewed 54

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.

0 Answers
Related