Slider issue with xpercent

[artstyle]

hello guys
i want the red block move from left to right. with css i can do it perfectly from -100% to 100% and it will looks great even if i change the content inside
but with GSAP i cannot do this perfectly because of starting position. i cant use gsap.set or gsap.fromTo because i will see the block at start in center.

but if write the starting position (-100%) at css and move it with gsap, the gsap will think that it is 0% not -100% and when i change the content inside the whole construction looks broken....
how can fix that? should i just do this with css toggling?

See the Pen WNojyZv by aptypkaa (@aptypkaa) on CodePen

[PointC]

Maybe I'm misunderstanding the question, but couldn't you use this?

gsap.fromTo( ".slide", {xPercent:-100}, {xPercent:100} );

 

[akapowl]

 

Or alternatively to what @PointC suggested, using x: "100%" instead of your xPercent seems to also work.

 

See the Pen 7c80e7a92c0c72f30103b474b3653678 by akapowl (@akapowl) on CodePen

 

[artstyle]

44 minutes ago, PointC said:

Maybe I'm misunderstanding the question, but couldn't you use this?

gsap.fromTo( ".slide", {xPercent:-100}, {xPercent:100} );

 

fromto ... xpercent not working

 

41 minutes ago, akapowl said:

 

Or alternatively to what @PointC suggested, using x: "100%" instead of your xPercent seems to also work.

 

 

oh... x seems working... i thought i must use xpercent for translating in %

[akapowl]

 

6 minutes ago, artstyle said:

fromto ... xpercent not working

 

If you remove the transform in your CSS, you'll see, that it works quite well, too.

 

See the Pen b0a1253517023b4e886db7bf98fc69cb by akapowl (@akapowl) on CodePen

 

[artstyle]

2 minutes ago, akapowl said:

 

 

If you remove the transform in your CSS, you'll see, that it works quite well, too.

 

 

See the Pen

See the Pen b0a1253517023b4e886db7bf98fc69cb by akapowl (@akapowl) on CodePen

by akapowl (@akapowl) on CodePen

 

 

i didnt say it doesnt work.
i said i cant use it because of starting position. if you look closer the starting position is in the center and only then it moves from left to right.

nvm i use "X" for that animation. looks like it works

[GreenSock]

Just to clarify regarding the whole x/xPercent thing and why we recommend that you always set ALL of your transforms directly via GSAP (instead of mixing, some in CSS, some in GSAP):

 

The browser reports computed transform values in matrix() and matrix3d() which are ALWAYS pixel-based, so for example if you've got a 200px wide element with CSS of transform: translateX(-100%) the browser will report that as -200px. GSAP has no way of knowing that it was percentage-based. So of course GSAP interprets that as x: -200, xPercent: 0. You were assuming, however, that it'd be x: 0, xPercent: -100. See the issue? So now, if you animate xPercent to -50, for example, you'll end up with x: -200, xPercent: -50! 

 

It's not a bug at all - you just have to understand that GSAP gives you a lot of flexibility by letting you control (and combine) x and xPercent. 

 

Again, you'd never run into issues if you just directly set the values via GSAP because then it never has to get re-parsed from the browser and decompose the matrix()/matrix3d(). Better performance, better accuracy. 

[artstyle]

30 minutes ago, GreenSock said:

Again, you'd never run into issues if you just directly set the values via GSAP because then it never has to get re-parsed from the browser and decompose the matrix()/matrix3d(). Better performance, better accuracy. 

i cant set it with gsap because the block will be at the center for a millisecond after load. thats why i need it to be set via css.

for now i set the translate(x:-100%) via css and animate it with gsap(x:100%) looks fine. works

[PointC]

4 minutes ago, artstyle said:

i cant set it with gsap because the block will be at the center for a millisecond after load

You should read this post.

 

[GreenSock]

1 hour ago, artstyle said:

i cant set it with gsap because the block will be at the center for a millisecond after load. thats why i need it to be set via css.

for now i set the translate(x:-100%) via css and animate it with gsap(x:100%) looks fine. works

Sure, it's fine to set it via CSS initially (to avoid the "flash"), and ALSO set it via GSAP:

//CSS
transform: translateX(-100%);

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

That way, everything is totally clear and from this point on, the GSAP animations will be optimized for performance and accuracy.