Alyz Posted February 24, 2020 Share Posted February 24, 2020 Hi, I'm putting together an animation which moves a number of element around the screen at in a seemingly random pattern, I am able to achieve one random movement but when I apply a repeat:-1 the positions all reset. I'm thinking I need some sort of looping function to achieve this but my javascript is not as strong as it could be and and i'm struggling to work it out? I'm also aware that the way i'm animating the items might mean that they eventually end up off screen, is there anything more intelligent I can do to stop this from happening? Any help gratefully received. See the Pen JjdEEGz by AlexFarminer (@AlexFarminer) on CodePen 1 Link to comment Share on other sites More sharing options...
Carl Posted February 24, 2020 Share Posted February 24, 2020 Cool demo. The first part of your question can be solved by adding repeatRefresh:true to your timeline like so: var tl = gsap.timeline({ repeat:-1, repeatRefresh:true }); This is explained in more detail in the GSAP 3.1 release notes. Be sure to watch the video! 5 Link to comment Share on other sites More sharing options...
OSUblake Posted February 24, 2020 Share Posted February 24, 2020 5 hours ago, Alyz said: I'm also aware that the way i'm animating the items might mean that they eventually end up off screen, is there anything more intelligent I can do to stop this from happening? If you keep your SVG in the same aspect ratio, like you're already doing, then use values from your viewBox size. Assuming everything starts out centered, you would use half the values of your viewBox (1920 x 1080) . var randomX = gsap.utils.random(-920, 920, true); var randomY = gsap.utils.random(-540, 540, true); tl.to(data, { duration: randomTime, x: randomX, y: randomY, }) Of course that can put stuff right up to the edge, so you might want to reduce those values by the width and height of the largest elements. 2 Link to comment Share on other sites More sharing options...
mikel Posted February 24, 2020 Share Posted February 24, 2020 Hey @OSUblake, With the keyword RANDOM, this pen always popped up: See the Pen BRpgpR by osublake (@osublake) on CodePen So why not See the Pen YzXNaKo by mikeK (@mikeK) on CodePen Happy random distance ... Mikel 2 Link to comment Share on other sites More sharing options...
OSUblake Posted February 24, 2020 Share Posted February 24, 2020 38 minutes ago, mikel said: With the keyword RANDOM, this pen always popped up: Ha. Still one of my favorite pens. Link to comment Share on other sites More sharing options...
Alyz Posted February 26, 2020 Author Share Posted February 26, 2020 Really great, thanks everyone. 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