GM_sql Posted December 6, 2021 Share Posted December 6, 2021 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 More sharing options...
Solution OSUblake Posted December 6, 2021 Solution Share Posted December 6, 2021 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 }); 2 Link to comment Share on other sites More sharing options...
GM_sql Posted December 6, 2021 Author Share Posted December 6, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now