baruch_pi

Thank you @Cassie!! I love the simplicity of your approach. For my use case, @GreenSock's approach is more scalable as the element's height might change depending on the content displayed inside the container. I achieved the desired outcome by using 100vh instead of 100%. y: calcTransform("y", "calc(100% - 100px)") Thank you both for your quick help! I sincerely appreciate it ???

Fantastic, thank you for your advice. I will try out your solution. The element I want to push out of frame should behave like the 'Now playing screen' on Spotify or Apple Music. It holds a lot of information when extended, but when truncated, it lives at the bottom of the screen. I tried using a standard value like 95vh for y, but the element often gets cut off. Ideally, I want it to use a precise pixel value to have more control over the element's height.

Hi everyone, I'm trying to animate out a page element and only keep 100px visible at the bottom of the screen. I tried using calc, but it doesn't work.. Any idea how I can achieve this animation? gsap.to(element, { y: "calc(100% - 100px)", duration: 1, ease: "power2.inOut" });