Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
romain.gr

Randomize value onUpdate.

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

Share this post


Link to post
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 6

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi guys,

 

Sorry for late answer, I haven't had the chance to look at all your answers yet as I had to switch on another project, I'll do it as soon as I can.

 

Thank you

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×