TRFC

Thank you for the explanation and difference between a string and a DOM element. For completeness, the code ​TweenMax.to (mary,3,{x:100}) also works. In this case, the mary without enclosing ' ' is recognised as a DOM element. Thank you so much for your help with my basic understanding.

I have a similar type of problem with the target name for a Tween. I bring the target name in via a variable and then put this variable into the tween -- it does on seem to work. I have a variable Jname which has the string value 'mary' ( i.e. Jname='mary' ). mary is the id value of a div --- <div id='mary'> ....... </div> I then find that TweenMax.to(Jname,3,{x:100}) does not work. I find that TweenMax.to(eval(Jname),3,{x:100}) does work. How do I avoid using the eval function for the target variable.

Thank you Carl, I will study your code and do some homework. I think this is on the right track as I was using javascripts (before finding GSAP) to work out the screen centre, top, right etc. My javascript code used the commands scrolltop and window .inner height. Learning about putting an equation into the tween call line is very helpful. I guess I could put jwt_move_right into the Tween call line and then get a function to return x:value, left:value, xPercent:value. I find out about the screen location using this code : function jwt_view(Jname){ //Jget=document.getElementById(Jname); var Js=[]; Js.w=document.getElementById(Jname).offsetWidth; Js.h=document.getElementById(Jname).offsetHeight; Js.screenX=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0); Js.screenY=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0); Js.left =(window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0); Js.top=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0); Js.centre = Js.left + (Js.screenX/2); Js.middle = Js.top + (Js.screenY/2); Js.right = Js.left + Js.screenX; Js.bottom = Js.top + Js.screenY; return Js; }​ I then use some code for moveX:top moveX:right to convert it to Tween commands if (Joptions.moveX=="right"){Joptions.left=Js.right;Joptions.x=parseInt(Joptions.offsetX)||0;Joptions.xPercent="-100%";Joptions.position='absolute'}; I then do a document.write to get the correct commands in the Tween call line. Sorry for a long message. Basically I want to be able to write in the Tween call line containing MoveX:top and get this to run a function to return the left: and the xPercent: values To answer your earlier question where you said you didn't understand my requirement. I have a page which is scrolled down and scrolled across -- i.e. a big page -- with scroll bars showing. I wand to move an element to the top, left, right, bottom or middle of this scrolled (visible on the computer screen) screen. Thank you for you last answer -- calling a function from the Tween call line and returning some Tween parameters will do the trick. Thanks

Coming back to this topic after about 2 years just to see if there is any solution now. To recap :- All I want to do is to position an element (div or img) at the centre of the screen (not centre of the browser window) WHEN the page has been scrolled down and across. You gave me a solution to centre in the browser window but what I want is to centre on the screen when the page has been scrolled. Basically one reason for this is that I want to invoke a pop-up message on centre screen (do a display: block) when the page has been scrolled down and maybe across.Need a routine to determine the screen centre and then to use GSAP x, y, left, top, xPercent etc. to move the element to this centre position.

Thanks for the answer. I guess I can write the javascript code -- I already do this for the question I submitted on May 15th (New Feature [request] ) to find the co-ordinates of the viewport (even when scrolled) and then to modify the Tween vars. I actually front the TweenMax with my function jwt_animate, intercept vars such as x:"right", and replace them with left : and xPercent : and for good measure add a new value in x: for the offset from the right margin. I think the codepen demonstrates this. I was hoping that a function already existed. I was also hoping that instead of fronting TweenMax, I could link my Javascript under the call line so that TweenMax did the calculations as a sub-routine. Anyway, thanks for confirming that my requirement does not exist.

Hello experts, Is there any userguide or codepen example on how to us the AutoFitArea with TweenMax. I want to scale images (which all might be different sizes) and elements to a known size -- a window or div in my html AutFit Area seems to have the options I need but how to use with TweenMax ?

Here is a codepen of what I would like to be able to do in GSAP http://codepen.io/anon/pen/eNdbLN I have created a script jwt_animate which has the same syntax as tweenMax. This script contains some code to detect x:"right" y:"bottom" and also offsetX:n offsetY:n which are not supported by TweenMax and then proceeses the numbers to get Tweenmax to run. Note : the scollbars have been set such that the page starts offset from left and right. My script find the view window relative to 0,0 and then converts "right" "bottom" into the left top coordinates. the x and yare replaced by the offsetX and offsetY values (which in most cases will be set to 0) Change the window size. The box will always move to the edge of the viewwindow -- even when scrooled across/down the page. Is there a simpler way to do this ?

Allow me to decribe a little better. In the Codepen example given above, add the line <div style="width:2000px, height:2000px"> </div> This will put scrollbars at the right side and the bottom side. Then, in the example, move the scoll bars approx. midway. I want the ball to move around in this viewable pane.

thank you for the example code --looking through these types helps me as a starter. I will also check out the links. Not quite what I was asking about. Say i am on a big page and have scolled down a section and also scrolled across a section. (say mid way down and midway across) I would then like to say in the Tween x:"right" and the element would move to the edge of the viewable screen (which might not be the extent of the window) same for x:"left" x:"middle" and also the same for the y direction. I think the Tween code will need to calculate the scrolled distance. screen right being something like :- x=(window.innerWidth||document.body.clientWidth||document.documentElement.clientWidth)+(window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft)

I am a novice at writing Javascript and I know my coding is terrible. I have been creating a few examples of moving elements around the screen as part of my learning. I just discovered GSAP and marvel at the capability. i have stopped my writing and am now spending time learning how GSAP works -- a long way to go before I create some of those fancy animations. Anyway, there is one feature jwt_move that I coded and seems to be missing from GSAP. In the x and y options for the basic moves, in addition to number of px, I also coded in"left" "right" "center" "top" "bottom" "middle" which would move the element to the edge of the viewport. In addiion, I coded a bounds/nobounds option and if 'edge' is selected for this option, a move of say 10000px would stop at the edge of the viewport. In addition, I could move an element to the viewport edge and then offset from that edge by a number of px using 'offsetX. The web site has my example. There is some simple documentation for the options at:- http://www.trfc.me/jwt_scripts/documentation/jwt_move_description.shtml The example: http://www.trfc.me/jwt_scripts/examples/jwt_move_example.shtml I have not found a way of doing these functions with GSAP. Please don't criticise my coding -- I know it is terrible -- but what it does is a feature I could not find in GSAP. Note: if the viewport size is known, maybe scale could also be limited to the viewport edge as an option.