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