12345 Posted May 22 Share Posted May 22 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 More sharing options...
Rodrigo Posted May 22 Share Posted May 22 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! Link to comment Share on other sites More sharing options...
12345 Posted May 23 Author Share Posted May 23 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 More sharing options...
Solution mvaneijgen Posted May 23 Solution Share Posted May 23 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now