Nicolassz

Thanks @Rodrigo, that was exactly what i was looking for!! I'm gonna search more about this gsap context and yPercent etc... Have a great rest of your week ?

Sure @GSAP Helper! Here is the codesandbox of my project. (All stuffs are running at App.tsx) https://codesandbox.io/s/clock-app-ewji38?file=/src/App.tsx

Hey guys, i'm trying to animate a hidden section, which appears when you press a button in the main section. The result i want to achieve is similar to this site: https://clock-app-frontendmentor.vercel.app/ When you click the "more" button, it animate the main section, throwing it up and appearing the "more info" section. What do i have to use from gsap to achieve that? I tried the FLIP Plugin but i wasn't able to make it work, idk how it works well... BTW, i'm using React + TailwindCSS Here is what i tried to do with Flip: const infoContainer = Flip.getState(".infoContainer"); const clockContainer = Flip.getState(".clockContainer"); Flip.from(infoContainer, { duration: 1, ease: "power3.inOut", targets: ".infoContainer", scale: true, absolute: true, onEnter: (elements) => gsap.fromTo( elements, { translateY: 2 }, { translateY: 0, opacity: 1, duration: 1 } ), onLeave: (elements) => gsap.to(elements, { opacity: 0, duration: 1 }), }); Flip.from(clockContainer, { absolute: true, scale: true, duration: 1, ease: "power3.inOut", }); And here are the clockContainer and the infoContainer, only the sections... Clock Container: <section className="clockContainer flex items-end justify-between text-almostWhite"></section> Info Container: <section className={` ${openInfo ? "translate-y-0" : "hidden translate-y-full"} infoContainer flex h-3/4 w-full items-center bg-white/70 backdrop-blur-md`} > If you need any more information, please let me know! Thanks Codesandbox Link: https://codesandbox.io/s/clock-app-ewji38?file=/src/App.tsx