Search the Community
Showing results for tags 'translate position'.
I have been using greensock for a content slider that has 3 buttons, each related to the div holding the content, I've been using timeline lite for the animation, I first click the button the animation works like it should it translates the values I'm giving it, but when I click the button for a second time the divs holding the content don't translate anymore. I have taken screenshots for what's happening, one of them is what is happening in the DOM after i press the button for a second time, and the other is my code, I was following this tutorial http://www.youtube.com/watch?v=4DMzlkmcZCw I appreciate in advance the help. Thank you.
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. http://codepen.io/nushi/pen/gPgaEN?editors=101 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. http://codepen.io/nushi/pen/gPgaEN?editors=101