[Get random numbers on each onComplete/onRepeat iteration]

Hey guys, 

 

sorry to bump up this thread again but I want to build my animations functions a little bit different now.

I've created a AnimationsManager.js where I put my eyesAnimations function :

 

import { TweenMax, yoyo} from 'gsap';

export function eyesAnimation( target ) {
  console.log(target)
  //controls if Bill will look to left or right
  let rotation = Math.floor(Math.random()*2) == 1 ? 7 : -7
  //controls rotation velocity
  let animationSpeed = Math.floor(Math.random() * .8 ) + .25
  //controls the delay after a yoyo effect
  let delaySpeed = Math.floor(Math.random() * 3 ) + 1.5
  //controls how long Bill will look to the left or right
  let repeatSpeed = Math.floor(Math.random() * 5 ) + 1

  TweenMax.to(target, animationSpeed, {
    rotationZ: rotation,
    delay: delaySpeed,
    repeat: 1,
    repeatDelay: repeatSpeed,
    yoyo: true,
    onComplete: eyesAnimation
  })
}

 

And then use it in my main class :

 

import { eyesAnimation } from '../../managers/AnimationsManager/AnimationsManager';

class Bill extends Component {

  componentDidMount() {
    eyesAnimation( this.eyes )
  }

	render () {
		return (
			<svg version="1.1" height="36" width="36" viewBox="0 0 22 22" preserveAspectRatio="xMaxYMax meet" >
				<circle cx="11" cy="11" r="11"/>
				<g ref={node => this.eyes = node}>
				  <circle  fill="#00E676" cx="7" cy="7.4" r="2.35"/>
				  <circle  fill="#00E676" cx="15.5" cy="7.4" r="2.35"/>
				</g>
			</svg>

		)
	}
}

 

Now the eyesAnimation will trigger only once and then lose the "target" parameter, it will console.log as undefined. How can I manage to use Tweens located in an utility file?

 

Thanks in advance !

[Get random numbers on each onComplete/onRepeat iteration]

@OSUblake, I was battling with my code for like 4 hours and you solved it in 10minutes, it works perfectly, thanks  

[Get random numbers on each onComplete/onRepeat iteration]

Hey guys,

 

First of all I'm using GSAP with React, it seems important to be told.

 

Here is the code :

 

eyesAnimation(target) {
  //will give either 12 or -12
  let rotation = Math.floor(Math.random()*2) == 1 ? 12 : -12
  //will give random value from .5 to 2
  let speed = Math.floor(Math.random() * 2 ) + .5

  console.log(rotation)

  TweenMax.to(target, speed, {
    rotationZ: rotation,
    delay: 3,
    repeatDelay: 3,
    yoyo: true,
    repeat: -1,
    onRepeat: this.eyesAnimation,
    onRepeatParams:["{self}"]
  })
}


this.eyesAnimation( this.eyes )

 

What I am trying to do is to get random values for my parameters (rotation, speed and later on delay etc...) on each onRepeat iteration.

The console.log will correctly display a random value in the console on each repeat but it wont apply it into the TweenMax, meaning the value that will be used on the next repeat will be the same as the previous one.

 

Can someone help?

 

Thanks!