Jump to content
Search Community

Tween from pixel to percentage and reverse

netroid test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi netroid :)

 

Welcome to the GreenSock forums.

 

Instead of tweening to 50%, you could get the window width/2 and tween to that value. Something like this:

var tl = new TimelineLite({ paused:true });
var newWidth = window.innerWidth/2;
tl.to(".red", 1, {width: newWidth});

Depending on what you're doing you may have to recalculate the window width and recreate the tween after a window resize event, but that should work for you.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Yes, this behavior is intended to be a convenience. When it senses that you're animating to a percentage value, it converts things to that for maximum responsiveness. Plus, the browser always reports current values in px, so we've got to do some assumptions under the hood (in this case, that if you're animating to a percentage, that's how the beginning value should be interpreted as well), otherwise even if you had a starting value in your CSS of width: 10% or something,  the browser would still convert that to a px value when GSAP requested the current value, thus when you reversed later on, it'd return to px (typically an undesirable thing). 

 

But don't worry, I have a solution for you. It's undocumented, but just add strictUnits:true to your tween. 

tl.to(".red", 1, {width: "50%", strictUnits:true});

Better?

  • Like 7
Link to comment
Share on other sites

Currently yes, it's just a boolean and it's solely for interpreting the starting values that the browser reports when you have a "to" value that %-based. It's the only actual use case that's ever come up (maybe once or twice in 4 years). I'm not sure it'd be worth the extra kb & logic to make it fancy, apply to lists of properties, various unit types, etc. But if it becomes a more common need out there, I'd certainly reconsider it. Have you run into a need for this before, Blake? Seems like quite an edge case, but I could be wrong. 

  • Like 1
Link to comment
Share on other sites

That's an interesting feature.

 

Jack is like that cool friend who has every tool imaginable in his garage. 

 

Me: "I need a weird 16.456 mm socket with a torque wrench that bends around an 80.815 degree corner and has a mirror on it."

 

Jack: "Sure you can borrow that. I've got two. Do you want it in green or black?"

 

:D

  • Like 6
  • Haha 1
Link to comment
Share on other sites

  • 2 weeks later...

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