Animate "from" parameter not ending in proper position (translate(x,y)

[coco]

First off .. Happy New Year to All  

I happen to be enjoying mine with a cup of coffee and some greensock practice. Yes, I am loads of geeky fun. 

So, I cannot quite wrap my head around what I am doing incorrectly with my timeline.  
See the codepen below as reference.

I have created a container div = #test

Within this container I have a div absolutely positioned at the center (class="xy-pos-1")  
I am using the translate attribute because I want this div to be centered regardless of the its dimensions.

And, within this div I am placing an image (class="xy-pos-2") that is also absolutely positioned at center relative to its container. 

Everything works as intended except when I want to animate the image from another position along the x-axis.  The finally resting place is not correct.

If you comment the timeline animation out, you will see the div is placed exactly as designed.  

 

The desired movement is from the right to its ending spot directly in the middle.  This works sometimes. 
I have tried adding various positions to make the "from" position work properly but I have not succeeded.  

Can anyone shed light on this? I think I am not fully grasping the position parameters here. 

See the Pen gPgaEN?editors=101 by nushi (@nushi) on CodePen

[PointC]

Hi coco  ,

 

Happy New Year to you as well.

 

You're centering all your divs so your travel distance on the x will be from the new origin which is the container center. You said you want to animate from the extreme right side of your container so you have a few ways to achieve that.

1. You can manually calculate that number: container 400px - animated div 100px and divide by 2 for 150px.
2. You can animate from/to left:100%, but this will be a problem because you've centered everything and now the div center point will go to 100% and the animated div will overlap the container.
3. The most foolproof way would be to get the width of the container and the animated div and feed that data into the tweens.

I've forked your pen to show you those three options. 

See the Pen XXpdmQ by PointC (@PointC) on CodePen

 

You can also save some CSS by have GSAP set your xPercent:-50 and yPercent:-50 rather than all those vendor prefixes for translate.

 

You may have seen this GreenSock blog post, but if not, there is some good reading here about xPercent and yPercent:

http://greensock.com/gsap-1-13-1

 

Hopefully this helps a bit.

[Carl]

Yeah, PointC is on the right track. This is a little tricky but the most important takeaway is that using GSAP to do the initial percentage translations is best

TweenLite.set(".img-blue", {xPercent:-50, yPercent:-50});

part of the problem is that the transforms you are setting in your css are getting overwritten by the inline transform that GSAP sets due to having higher specificity:

http://prntscr.com/9l2lrf

 

If you let GSAP manage everything you should get the desired results.

[coco]

Carl and PointC 

 

Thanks for your help! .. I changed the outer container to not be a fixed width just to see if the forked worked  and it did!  I like option 3. I appreciate the examples showing the differences.

 

I see the value of setting the original position with gsap and not in the css.  But if I had more of these position points, would there be any drawback browser performance-wise of setting all their starting position percentage values in gsap?   

As an example, I created a pen using 5 absolutely positioned points in a div, each equidistant to cover the 4 corners and the center.

See the Pen QydpwK by nushi (@nushi) on CodePen

I am able to absolutely position an object using a class. No big deal.  Just CSS.  I can see how using GSAP for setting the X and Y translate values is a big time saver and solves my original question about the end position being off after animation.   But could adding more set points this way be a taxing to the browser .. . or more taxing than using plain CSS?  Say  I were to increase the position points to 5, or 10 or 20 points or more?  Perhaps setting the values in GSAP first is best choice or only choice if I want the option of animating an object with a from animation to these end points? 

By the way, in this new pen I know I shouldn't be using a px width to start my animation from the right, but calculating the outerwidth on each container is challenging for me. (hmm... on second thought, maybe I need to use parent() ).. For now, I gave the right side the value: {right: "-100px"}.   

I think this is a good experiment as another way to place objects on a screen that could be animated rather than using the typical grid .. in some instances.   And, if I were to use translate XY for positions around each of the anchor points, I would have even more flexiblity.



 

[OSUblake]

To get the outer width, just use $(element).outerWidth() for jQuery or element.offsetWidth for vanilla.

 

And setting stuff with GSAP is not going to cause any performance issues. Do you see any performance problems here? It's setting and animating 256 elements.

 

See the Pen zvpEMg?editors=001 by osublake (@osublake) on CodePen