Select Individual Shapes in an SVG Randomly when Tweening

[emilychews 17 Likes (Newbie)]

Hi,

 

I have a series of shapes within an SVG I'd like to apply a tween to randomly - how would I go about this?

 

In the attached CodePen example I have 9 dots and I'd like it so one animates in and out, followed by a different one selected at random. 

 

(currently all the dots are animating at the same time)

 

I'm guessing I'll have to loop through the dots class and have it pick one of them at random?

 

I'll be honest though, I'm struggling how to get this to work.

 

Any pointers would be wonderful.   

 

Em.


 

See the Pen ebJZqE by emilychews (@emilychews) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

@emilychews

 

One method would be to get all dots (by classname) into an array and generate a random number between 0 and the length of that array minus 1 (for the indexes available in that array) and tween the element randomly addressed. Here is a CodePen illustrating that. (note though that the Pen doesn't look to see if the random integer is different than the previous random integer ... which means the same dot could tween multiple times in a row)

 

See the Pen gZPwmx by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

Shaun

 

[OSUblake 9,990 Likes (Superhero)]

On 12/13/2018 at 12:19 PM, Shaun Gorneau said:

(note though that the Pen doesn't look to see if the random integer is different than the previous random integer ... which means the same dot could tween multiple times in a row)

 

 

If you use an array, you can use .filter() to filter out the last dot.

 

// availableDots will be a new array without the lastDot in it
var availableDots = dots.filter(function(dot, index) {
  return dot !== lastDot;
});

 

 

See the Pen RERLJx by osublake (@osublake) on CodePen

 

 

 

[OSUblake 9,990 Likes (Superhero)]

On 12/13/2018 at 12:19 PM, Shaun Gorneau said:

One method would be to get all dots (by classname) into an array

 

I should probably clarify my array statement. document.getElementsByClassName() returns an HTMLCollection and document.querySelectorAll() returns a NodeList. Both are array-like, but they don't have Array methods like .filter().

 

That's why I used Array.from(), which will convert it to convert it to an actual array.

 

var dots = Array.from(document.querySelectorAll('.dot'));

// For old browsers
var dots = Array.prototype.slice.call(document.querySelectorAll('.dot'), 0);

 

 

 

[emilychews 17 Likes (Newbie)]

Hi @OSUblake and @ShaunGorneau

 

Thanks for both answers this is fabulous (and apologies in the delay in coming back to you both).

 

Em