Jump to content
Search Community

Select Individual Shapes in an SVG Randomly when Tweening

emilychews 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 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

Link to comment
Share on other sites

@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

 

  • Like 4
Link to comment
Share on other sites

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

 

 

 

  • Like 5
Link to comment
Share on other sites

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);

 

 

 

  • Like 4
Link to comment
Share on other sites

  • 3 weeks later...

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