Jump to content
Search Community

Generate Random Scale Values with Math.round() Method That Refreshes After Each Execution

emilychews test
Moderator Tag

Recommended Posts

Hi,

 

I have three vertical bars that I'm scaling up and down to represent music (they won't be linked to any audio file).  

I'm using Math.random() to generate a scaleY value and am repeating the animation with the yoyo effect, but need a way of reseting the Math.round() value after each execution.  At the moment the animation just repeats using the initial scale value.

 

My hunch is to add something to anoncomplete method and remove the repeat parameter, but I can't seem to see how best to approach this?

Any help would be wonderful.

 

var soundbar = document.getElementsByClassName("sound-bar");

gsap.set(soundbar, { scaleY: 0.1 });

gsap.utils.toArray(soundbar).forEach(function (bar) {
  gsap.to(bar, {
    duration: 1,
    scaleY: Math.random(),
    ease: "none",
    yoyo: "true",
    repeat: -1
  });
});

 

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

Link to comment
Share on other sites

You could tell it to refresh the values every time it repeats by setting repeatRefresh: true, and make your scaleY one of the fancy string-based dynamic random values like: 

 

var soundbar = document.getElementsByClassName("sound-bar");

gsap.set(".sound-bar", { scaleY: 0.1 });

gsap.utils.toArray(".sound-bar").forEach(function (bar) {
  gsap.to(bar, {
    duration: 1,
    scaleY: "random(0,1)",
    ease: "none",
    yoyo: "true",
    repeat: -1,
    repeatRefresh: true
  });
});

Or you could use an onComplete to just call the same function in a cycle and you could sprinkle in random delays and different durations to make things animate in slightly different cycles (less robotic):

See the Pen 0bb8d1e6fe6904f7def8f8e4ef98b272?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

Thanks Jack. That's great.

 

Just out of interest (because I may be doing something with the canvas API soon). If I do want to generate values with the Math.random() and then restart the animation from the start again, what is the best way to do this (links to methods in the docs etc will be fine). I couldn't seem to find how to do it.

Link to comment
Share on other sites

2 hours ago, emilychews said:

Just out of interest (because I may be doing something with the canvas API soon). If I do want to generate values with the Math.random() and then restart the animation from the start again, what is the best way to do this (links to methods in the docs etc will be fine). I couldn't seem to find how to do it.

That's the first solution I provided.

 

There are actually a bunch of ways you could do it. Here's yet another - function-based values: 

gsap.set(".sound-bar", { scaleY: 0.1 });

gsap.utils.toArray(".sound-bar").forEach(function (bar) {
  gsap.to(bar, {
    duration: 1,
    scaleY: () => Math.random(),
    ease: "none",
    yoyo: true,
    repeat: -1,
    repeatRefresh: true
  });
});

The repeatRefresh thing is the key - that's what tells it to flush the old values on each repeat. 

 

Does that clear things up? 

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