Jump to content
Search Community

Randomize value onUpdate.

romain.gr test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I'm wondering if it would be possible to randomise number AND pass it to the animation on update:

 

$('.dot').each(function(e){
	var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update});
	
	var timing = Math.floor(Math.random() * 10) + 8,
			posY = Math.floor(Math.random() * 90) + 0,
			posX = Math.floor(Math.random() * 100) + 0;
	
	function update(){
			timing = Math.floor(Math.random() * 10) + 1,
			posY = Math.floor(Math.random() * 90) + -90,
			posX = Math.floor(Math.random() * 6) + 1;
		
		// console.log(timing, posY, posX);
		// floatingThis	.to($(this), 1, {x: posX + 'vw', y: posY + 'vh'});
		// floatingThis.play();
	}
	
	console.log(timing, posY, posX);
	
	floatingThis	.to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone});

});

 

 

I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho.

 

Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding).

 

Thank you

See the Pen aGOWJJ by romaingranai (@romaingranai) on CodePen

Link to comment
Share on other sites

There may be a better way to to this, but I'd probably skip the repeat and the yoyo and call a function onComplete. That function would set a new set of random "to" coordinates, and then start another tween which calls the same function onComplete for a new set of randomized "to" coordinates. Etc. Etc.

 

Cool CSS grain btw.

 

 

  • Like 7
Link to comment
Share on other sites

I wasn't sure what part of the code you really needed help with.

Its really best to reduce things as much as possible for support issues.

I wasn't sure if we should be looking in the mousemove and mouseleave functions too.

 

I agree with MindGamer, a recursive function call is probably best for what I think you are describing.

Move something someplace, and when its done move it another place:

 

 

See the Pen XqbYXX?editors=1010 by GreenSock (@GreenSock) on CodePen

 

This thread has some more advanced solutions

 

 

  • Like 7
Link to comment
Share on other sites

Yep, I'd do exactly what @MindGamer recommended. Simple example:

function random(min, max) {
    return min + Math.random() * (max - min);
}
function gotoRandomPlace() {
    //notice the onComplete points back to this same function, so it'll keep going to random coordinates
    TweenMax.to(...{x:random(-100, 100), y:random(-100, 100), onComplete:gotoRandomPlace});
}
gotoRandomPlace();

 

As for vw/vh units, those aren't supported on transforms because to maximize performance, GSAP bakes everything into matrix() or matrix3d() values which are always px-based (although it does support percentage-based values as well by prepending a translate() or translate3d()). You should be able to relatively easily convert vw/vh on your own, though, like:

 

//converts viewport units to pixels (like "50vw" or "20vh" into pixels)
function toPX(value) {
    return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth);
}

//then, in your tween:
TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")});

 

The only caveat is that since the end result is in px, things won't shift if the window gets resized AFTER the tween finishes. But you could certainly use an onComplete to set those units directly, like element.style.transform = "translate(50vw, 20vh)"; if that's essential for your context. 

 

Does that help? 

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