Incorrect position when moving object to path position

[Alberto Mercurio]

Hello,

 

I'm new using GSAP, and I find it amazing.

 

I was trying to move a circle to a point on a path, but it seems more complicated than expected. In several threads here I tried using the relative position, but the final point is not always accurate and it seems to depend also on the div container the two objects belong to.

 

I also tried to use the Global Matrix, but it doesn't seem to work.

See the Pen NPqYVzp?editors=1111 by albertomercurio (@albertomercurio) on CodePen.

[Rodrigo]

Hi @Alberto Mercurio and welcome to the GSAP Forums!

 

This seems more related to the second call of your method, the one for the cy attribute, which throws everything off (at least for that particular value).

 

This seems to work:

gsap.set(orbit2, {
  rotation: 45,
  transformOrigin: "50% 50%",
});

const coords = getOrbitRelativeDistance(electron, orbit2);

gsap.to(electron, {
  attr: {
    cx: "+=" + coords.x,
    cy: "+=" + coords.y
  },
  duration: 2
});

There are other ways to tackle this though, like using the MotionPath plugin and an extra element without fill (transparent) that sits at a specific position and then use the getBBox method to move the blue element to that particular position.

 

Finally on a purely geeky/nerd scientific point of view, is physically impossible(on a mechanic and electric way) for an electron to occupy the space of a proton or be in the nucleus of an atom. Of course I doubt too many people would point this out, but being a bit of geek I normally can't resist myself 🫢

 

Happy Tweening!

[Alberto Mercurio]

Hi @Rodrigo, thank you! It indeed worked.

 

Thanks for pointing out the physical feasibility of having an electron collapsed to the nucleus. 😄 Don't worry, that was just a simple example to describe the problem in a simple way.

 

Indeed, I have another question regarding a more complicated animation on the same system. My electron is now orbiting indefinitely in the first orbital, I then want to stop it and move it to the second orbit. I'm doin't everything with a timeline, where I the pause the Tween related to the orbit before moving it to the second orbit. I need the Tween to run indefinitely because I would like to move the electron only after an interaction (a click or so).

 

I had also to change the relative distance function, calling `toArray(".electron")` inside. If I use the electron extracted with `toArray` in the beginning, it doesn't work. So, apparently `toArray` returns a snapshot of the element?

 

Am I doing something wrong?

 

Here there is the CodePen link of the updated example.

 

See the Pen KwpRMgR?editors=1111 by albertomercurio (@albertomercurio) on CodePen.