[y: "calc(100% - 100px)"]

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 🙏🙏🙏

[y: "calc(100% - 100px)"]

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.

[y: "calc(100% - 100px)"]

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"
});