Can I improve this loop that sets multiple tweens ?

[Lynesth]

Ok so I've got this code here (which is working and all) but it feels... bloated ?

 

I was wondering if maybe I missed something I cannot see anymore to make it better:

 

var chestTween = [];
var delays = [];
for (var i = 0; i < 9; i++) {
    delays.push(4 + i * .2);
}
delays = shuffle(delays);

$(".chest").each(function(i, e) {
    var $this = this;
    var randX = parseInt(Math.floor(Math.random() * 200 + 1)),
        randY = parseInt(Math.floor(Math.random() * 200 + 1)),
        randXS = Math.floor(Math.random() * 2) ? "+=" : "-=",
        randYS = Math.floor(Math.random() * 2) ? "+=" : "-=",
        randRot = -Math.floor(Math.random() * (5 - 1 + 1) + 1),
        randRotE = Math.floor(Math.random() * (5 - 1 + 1) + 1);
    
    TweenMax.from(
        $this,
        1,
        {
            x: randXS + randX,
            y: randYS + randY,
            delay: delays[i],
            ease: Power4.easeOut
        }
    );
    
    TweenMax.fromTo(
        $this,
        1,
        {
            rotation: -360,
            scale: 0
        },
        {
            rotation: randRot,
            scale: 1,
            ease: Power4.easeOut,
            delay: delays[i],
            onComplete: function() {
                // Pushing those in an array because I need to kill them individually later
                chestTween.push(TweenMax.to($this, 2, { rotation: randRotE, yoyo: true, repeat: -1, ease: Power1.easeInOut }));
            }
        }
    );
});

 

The result is this (seems laggy, but it's just because of the recording software): https://imgur.com/ePq3fIx

 

Lyn.

[Shaun Gorneau]

I honestly think this is a pretty elegant way of handling things and I don't see anything I would change.

 

Math.floor(Math.random() * 2)

 is a pretty slick way of getting a random true/false

 

 

But, why the 

(5 - 1 + 1)

?

[Lynesth]

19 minutes ago, Shaun Gorneau said:

I honestly think this is a pretty elegant way of handling things and I don't see anything I would change.

 

Ok thank you.

 

 

20 minutes ago, Shaun Gorneau said:

Math.floor(Math.random() * 2)

 is a pretty slick way of getting a random true/false

 

Yeah, I don't know why I wrote it that way actually instead of simply checking if Math.random() < 0.5

 

 

12 minutes ago, Shaun Gorneau said:

But, why the 

(5 - 1 + 1)

?

 

Haha, that's just a leftover of

Math.floor(Math.random() * (max - min + 1)) + min

before I set min to 1 (was experimenting with different values at first).

[GreenSock]

Yeah, what you have isn't bad at all, but here's a slightly different approach that some might find a tad more readable: 

var chestTween = [];
var delays = [];
for (var i = 0; i < 9; i++) {
    delays.push(4 + i * .2);
}
delays = shuffle(delays);

$(".chest").each(function(i, e) {
	TweenMax.from(this,	1, {
		x: randomRelInt(1, 201),
		y: randomRelInt(1, 201),
		ease: Power4.easeOut,
		delay: delays[i];
	});

	TweenMax.fromTo(this, 1, {
		rotation: -360,
		scale: 0
	}, {
		rotation: random(-6, -1),
		scale: 1,
		ease: Power4.easeOut,
		delay: delays[i]
	});

	chestTween[i] = TweenMax.to(this, 2, {
		rotation: random(1, 6),
		ease: Power1.easeInOut,
		repeat: -1,
		yoyo: true,
		delay: 1 + delays[i]
	});
});

function random(min, max) {
	return Math.floor(min + Math.random() * (max - min));
}
function randomRelInt(min, max) {
	return ((Math.random() < 0.5) ? "+=" : "-=") + parseInt(random(min, max));
}

 

Happy tweening!

[Lynesth]

8 minutes ago, GreenSock said:

Yeah, what you have isn't bad at all, but here's a slightly different approach that some might find a tad more readable

 

Yeah it is more readable

But doesn't setting the last TweenMax.to() outside the onComplete function() breaks everything because it overrides the previous' tween 'rotation' property (cannot test right now) ?

 

I noticed you've replaced my '$this' with 'this' to specify the target of your tweens, is it faster that way ?

Does TweenMax's code internally retrieve the actual DOM element from jQuery objects so I should pass that instead to save 1 call ? (I guess the gain will be insignificant, but it's not like it's a hard optimization to make)

 

Thank you !

[GreenSock]

Nah, it shouldn't break anything because there's a delay on the to() tweens, so they won't actually do anything until that time. It's different with "from()" tweens because those have immediateRender:true by default (though you can change that of course). 

 

As for "this" vs. $this, yeah, it doesn't really matter that much. Ultimately inside GSAP it's gotta get the DOM elements themselves, so if you can pass that in directly it can save a little work but that's miniscule.