MotionPathPlugin.getRelativePosition
MotionPathPlugin.getRelativePosition( fromElement:Element | window, toElement:Element | window, fromOrigin:Array | Object, toOrigin:Array | Object | String ) : Object
Gets the x and y distances between two elements regardless of nested transforms! feed two elements to this method and it'll return the gap between them as a point {x, y} according to the coordinate system of the fromElement's parent.
Parameters
fromElement: Element | window
The element from which the distance is measured (typically this is the element that will be moved to the
toElement
)toElement: Element | window
The destination element. This should be an element reference (like myElem), not a selector string (like "#myElem").
fromOrigin: Array | Object
[optional] Determines the point on the
fromElement
that serves as the origin of the measurements. It can be either an Array with progress values along the x and y axis like[0.5, 0.5]
(center),[1, 0]
(top right corner), etc. OR a point Object with pixel-based local coordinates like{x: 100, y: 0}
toOrigin: Array | Object | String
[optional] Determines the point on the
toElement
to which to measure. It can be either an Array with progress values along the x and y axis like[0.5, 0.5]
(center),[1, 0]
(top right corner), etc. OR a point Object with pixel-based local coordinates like{x: 100, y: 0}
OR for If the toElement is a <path> you can use"auto"
to align with the beginning of the path itself rather than using the bounding box.
Returns : Object
An object with "x" and "y" properties describing the distance along each axis
Details
Gets the x and y distances between two elements regardless of nested transforms! feed two elements to this method and it'll return the gap between them as a point {x, y} according to the coordinate system of the fromElement's parent. By default, it will align their top left corners (bounding box), but you can define a different origin for each, like [0.5, 0.5]
would be the center, [1, 1]
would be the bottom right, etc.
Sample code
let inner = document.querySelector("#inner"),
dot = document.querySelector("#dot"),
delta = MotionPathPlugin.getRelativePosition(
dot,
inner,
[0.5, 0.5],
[0.5, 0.5]
);
gsap.to(dot, {
x: "+=" + delta.x,
y: "+=" + delta.y,
duration: 2,
ease: "power2.inOut",
});
Video
## Demo 1loading...
Demo 2
You can also localize the pointer coordinates, like in the below demo (click anywhere)
loading...
getRelativePosition()` was added in GSAP 3.2.0