Jump to content
Search Community

Random animations

Alyz test
Moderator Tag

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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!

 

 

  • Like 5
Link to comment
Share on other sites

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.

 

  • Like 2
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...