GSAP Random function gets called twice?

[samuelhigginson]

hello! 👋

 

I'm trying to avoid the elements jumping to their 'new' random location (not the FOUC) on Scroll Start.

I think it's something to do with the random function getting called on load, and then again when the playhead reaches the function in the timeline?

Maybe something to do with the .from as well?

 

Whatever it is, I gave it a good go and I'm stumped.

If anyone can give us a hand, that'd be awesome.

See the Pen JjMBBRa by halfvillain (@halfvillain) on CodePen

[OSUblake]

Hi Samuel, 

 

I'd just use the regular random functions instead so the random value doesn't get recalculated.

 

.from('#div0', {
        duration: 1,
        xPercent: gsap.utils.random(-400, 400),
        yPercent: gsap.utils.random(-400, 400),
        rotation: gsap.utils.random(-25, 25)
    })

 

[samuelhigginson]

33 minutes ago, OSUblake said:

Hi Samuel, 

 

I'd just use the regular random functions instead so the random value doesn't get recalculated.

 

.from('#div0', {
        duration: 1,
        xPercent: gsap.utils.random(-400, 400),
        yPercent: gsap.utils.random(-400, 400),
        rotation: gsap.utils.random(-25, 25)
    })

 

 

Cheers Blake!

🤝

 

A perfect solution for my initial query.

However I've just been experimenting, and it doesn't seem to work so well for staggered animations..

 

See the Pen GRyBXvm by halfvillain (@halfvillain) on CodePen

 

It seems the utility function doesn't give each target their own individual value, and I'm unsure on how correct this.

 

Any ideas? 🤔

 

 

[OSUblake]

Oh, I wouldn't use it for the defaults as it will be the same for every element. You need to target every element kind of like this.

 

 

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

 

[samuelhigginson]

Ahhhhhh of course, mega!

Cheers fella.