Jump to content
Search Community

How to force xPercent/yPercent to be expressed in %

GM_sql test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi, I have defined initial element position in css and Gsap anim target xPercent:
 

transform: translate(-100%, 0);
{duration: 1, delay: 0.2, xPercent: 0, yPercent: 0}

The problem is that it doesn't work at all, and in case I put xPercent as 100% the output is expressed in px - and that is not responsive.
What to do in order the code I've provided above is working?

Link to comment
Share on other sites

  • Solution

Hi GM_sql,

 

CSS transforms are reported as a matrix...

console.log(getComputedStyle(myElement).transform); // matrix(1, 0, 0, 1, -100, 0)

 

So there is no way for GSAP to know that the -100 in that matrix is supposed to be a percentage. Before you start animating, you should set your transforms with GSAP. GSAP will then be able to keep track of what is a percentage and what is a pixel value.

gsap.set(".foo", {
  xPercent: -100,
  x: 0
});

 

  • Like 2
Link to comment
Share on other sites

I had used this approach before but going through the tutorials I've wanted to improve my code and simplify it a bit. Unfortunately I have 2 conditions to apply (horizontal and vertical movement) so seems I have to stick to my original findings. Thank you.

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