Jump to content


.set() with xPercent doesn't work

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


Welcome to the forums.


I'm not 100% sure what you mean, but everything looks like it's working fine to me. Are you thinking that xPercent is referring to the screen width/position? When using xPercent and yPercent, you're referring to the element itself not the window width/height. In your example, the box is 50px wide so moving it xPercent:-100 is moving it 50px. You'd want to use x/yPercent to center your element and then regular x and y transforms to position that element where you want it.


Please take a look at this blog post which has a lot of details and some great examples of xPercent and yPercent:



Hopefuly that helps a bit.


Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Thanks for the demo. Craig is exactly right, it appears to be working as designed. 

Perhaps this will help you visualize what xPercent:-100 is doing: http://codepen.io/GreenSock/pen/mPBqZG

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.