Translate element from left edge of window to right edge of window

[ecastilloVF]

I'm trying to animate an element to go from its left side touching the left edge of the window to its right side touching the right edge of the window. I have the element starting on the left, and if I were to use CSS transforms, I could use calc(100vw - 100%) to place it on the right side. But I'm not sure how to accomplish that with GSAP. In my example, I usedx: 100vw to move it over to the right, but I can't figure out how to move it to the left 100% to get it in the exact spot. I feel like my approach may not be the best way to accomplish this.

See the Pen QwEEdqa by ecastilloVF (@ecastilloVF) on CodePen.

[GreenSock]

Sure, that's pretty easy if you use both x and xPercent: 

See the Pen azZZJYB?editors=1010 by GreenSock (@GreenSock) on CodePen.

[ecastilloVF]

Of course! That is perfect. Thank you so much.

[Rodrigo]

Hi,

 

I'm late to the party but this can be achieved using Flip and FlexBox, just in case someone else is looking for something with that particular setup:

See the Pen vYqxKoR by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!