Jump to content
Search Community

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

baruch_pi test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

 

Screen Recording 2023-03-20 at 19.59.11.gif

Link to comment
Share on other sites

  • Solution

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. 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...