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

[baruch_pi]

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

 

[GreenSock]

calc() values like that aren't supported in transforms because GSAP already has to normalize a bunch of stuff for you, break apart each component, etc. and you can't really interpolate between string values like "50px" and "calc(100% - 100px)" because the structure of the data is totally different. There are multiple ways to do what you're asking, but I suspect there's a much cleaner/better way to approach this. Can you explain why you're using a calc() value here? Once I understand your goal (and why you wouldn't use a normal value), I'll be able to offer better advice. 

 

Here's a demo with a helper function I whipped together: 

See the Pen NWLLVyW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But again, I strongly suspect there will be a better, cleaner solution once I hear the "why" behind your calculated value. I already have some other ideas that I'd reach for instead of that helper function in most cases. A minimal demo (like a CodePen) will go a LONG way toward getting you a substantive, accurate answer. 

[baruch_pi]

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.

[Cassie]

You could mix up yPercent and y values.

See the Pen GRXYWoW by GreenSock (@GreenSock) on CodePen

 

yPercent is a percentage of that elements height. 100 would be the entire height, then you can use y to offset that by 100px ✨

Hope this helps!

[GreenSock]

Yes, @Cassie's approach is much cleaner and I would definitely go that route. The helper function I provided is really only for extremely rare situations where you're doing some complicated calc() that can't be replicated in any other way. In all my years of doing this, I've literally never even once seen a situation where that'd be necessary. Like I said, there's almost always a cleaner approach than using calc(). In this case, it's quite simple using that approach from @Cassie that combines yPercent and y, but even if you had some other complicated scenario I'd bet it's possible to work around cleanly using some computed values which is why I requested some context and a minimal demo. 

 

In short: use yPercent and y in this case

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

[GreenSock]

4 hours ago, baruch_pi said:

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.

Actually, I think that's a reason to use Cassie's approach (unless I misunderstood your goal). The helper function just calculates the exact pixel value, but if you want it to truly remain based on percentage (so that it adjusts with the height of the element itself if that happens after the tween), the calculated pixel value isn't what you want. Did you try Cassie's approach with yPercent and y? That certainly seems like the correct route to go. 

 

A minimal demo will go a LONG way toward clarifying things and making sure we're all on the same page.