Jump to content
Search Community

Randomly move object inside viewport

12345 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites



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:


Here is a fork of your demo:

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


Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...