Jump to content


xPercent, yPercent

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

Hey guys,


Been wanting this xPercent, yPercent forever, thanks!


I am a little confused on how this works...


If you look at my codepen: 

See the Pen Ljheu by anon (@anon) on CodePen


I expect the box to go from the top left side of the container to the bottom right side of the container.


It seems to just move a percent based on its own size... any ideas how I would make the box move in relation to the size of the parent container?



  • Like 1
Link to comment
Share on other sites

According to the CSS spec, transform percentages are always relative to the element itself, not its parent. It sounds like maybe you're looking for "top" and "left" instead. Those are relative to the parent. 

  • Like 1
Link to comment
Share on other sites



I believe that this works based on the dimensions of the tween target not it's container, in your case the small black box.


I think that get it done the other way imposes the fact that the element's container should be it's direct ancestor, something that, because of many reasons I'm not going to state here, is usually not possible.


But I'm just speculating, I just read the newsletter and the new blog entry 20 minutes ago, so just like you I'm a total newbie here ;)


Hopefully Carl or Jack could clarify this for us.



Link to comment
Share on other sites

Oh well... there it is :D

Link to comment
Share on other sites

yeah, the solution here requires a mix of xPercent, left, yPercent, and top

tl.to(box, 2, {xPercent:-100, left:"100%", yPercent:-100, top:"100%", force3D:true})

Here is a fork of your pen:



And I will be the first to agree with anyone that says CSS can drive you up a wall. 


Honestly, it took quite a bit of tinkering for myself the other day while trying to figure out a very similar challenge that required this same mix of multiple properties.


Here is a top-secret Pen that we held off on releasing today as we didn't want everyone's head to explode at once:) http://codepen.io/GreenSock/pen/290c237a0f550288c84ed0312267f7ec?editors=001

  • Like 8
Link to comment
Share on other sites

Thanks for all the great replies...


There are many times where we have small elements, that need to move from the left side, to the right side, or top to bottom, etc.


I want to get away from left, top for performance reasons (imagine you have 100 stars)


I edited my codepen to make this work without using left top...


See the Pen sqtxp by anon (@anon) on CodePen


Question: Do you guys think that having a container 100% width height will be worse performance then just using left, top?

Link to comment
Share on other sites

I don't think we can accurately gauge the performance of that without actually seeing it run. I would just create a sample with 100 elements using top/left, and another sample using the 100% sized container, and get a definitive answer instead of a guess.


That said, I imagine it could end up using a lot of horsepower with 100s of those large containers (did you mean to give boxHolder the red background color as well?).

Link to comment
Share on other sites

Hey, I had about 20 elements in my scene and the x/y percents def ran smoother across all platforms. cheers!

  • Like 1
Link to comment
Share on other sites


Is it by design that both x and yPercent never use translate3d?

Setting force3D to true simply appends a translate3d(0 ,0 ,0). Will that trigger gpu acceleration?

Link to comment
Share on other sites

Yep, that's by design, and yes it would trigger GPU acceleration. 

Link to comment
Share on other sites

Thanks for the quick reply. I read the part saying "CSSPlugin accomplishes this under the hood by prepending a translate(x,y) to the normal matrix() ormatrix3d() that it sets on the element."

However, i just wasn't sure about it triggering gpu acceleration.

Link to comment
Share on other sites

  • 8 years later...

I at first thought I'd handle the parent width issue using xPercent, but instead solved the issue by using the "x" property instead, and setting an identifier for the parent width:


let parentWidth = document.querySelector("#parent").offsetWidth;
let childWidth = document.querySelector("#child").offsetWidth;
let xLength = parentWidth - childWidth;
.to("#child", { x: xLength });
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.