Randomly move object inside viewport

[12345]

I found this older topic that basically does what I want, but for GSAP 2:

I then created  to try to implement it for GSAP 3, but I struggle to keep the animated element within the viewport. Also, it seems that every now and then it does not update to new random coordinates, but keeps the ones from the previous iteration. Any idea how I can get it working? I tried various options like yoyo, onComplete, onRepeat, using a timeline etc. 

See the Pen RwmRwRL by dsdsdsdsdsds (@dsdsdsdsdsds) on CodePen.

[Rodrigo]

Hi,

 

I think you are overcomplicating this a bit. Having the element inside a flex container that centers it adds a layer of complexity regarding the initial position. Is better to have the element with position absolute so the coordinates x: 0 and y: 0 are the top left of the screen and not the center. Then just use the option to create random values on each repeat:
https://gsap.com/docs/v3/GSAP/gsap.to()#random-values

 

Here is a fork of your demo:

See the Pen oNRLZNE by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[12345]

Hi Rodrigo,

 

thanks for your help! I think I might have oversimplified the CodePen. The reason I can’t use position:absolute (at least in my understanding) is that eventually, the animation should end (either by timeout or click) and the letter should return to its original position, which is centered in a fixed header. It is not going to be a single letter either, but a word that I split with SplitText. So there’s a couple of letters floating around. Makes sense? I’ve update my CodePen slightly to illustrate this better.

[mvaneijgen]

I just tested it and it just works? Am I missing something? Hope it helps and happy tweening! 

 

See the Pen oNRLGKb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.