Moving Draggable object with respect to window X posotion

[SSB]

Hi All,

 

I have created a Draggable  elements which slides on a particular slider path which is at the center of the window screen.

During some action, i need to move the  elements along x axis  of window coordinates, it seems x coordinates of dragable element is different from window X as the X values in Tweenlite always points to the slider path of the element.

What is the property we need to use in Tweenlite to make the dragable element moves along with respect to window x positions.

Basically im trying to move the dragable element to the position of the another element which x position has calculated from 'getBoundingClientRect' method

 

Created element as dragable:- 

 

Draggable.create('element', {

bounds: 'sliderPath',

type: 'x',

throwProps: true,

minDuration: 0.25,

maxDuration: 1.5

}

Tried :

 

TweenLite.to('element', 0.4, { x: 0 }); [always resets to slider path start position not window start]

 

Question :

 

TweenLite.to('element', 0.4, { ?: 0 });

what should be the correct property to fill "?" in the above line to move the element along x axis of window.

 

Thank you

 

 

[OSUblake]

Make a demo. 

 

[ZachSaucier]

Hello BSumanth and welcome to the GreenSock forums!

 

19 minutes ago, BSumanth said:

TweenLite.to('element', 0.4, { x: 0 });

Applied to a DOM element like you have, GSAP will see this and set transform: translateX(0). To make it move to the window's 0 position you would need to calculate how far away it is from the 0 position initially and change the value to that instead. 

 

As said by BZlake, a demo would be helpful because there may be an easier way but it depends on your setup and how the element(s) are positioned