Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GreatHawkeye

Get random numbers on each onComplete/onRepeat iteration

Recommended Posts

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!

Link to post
Share on other sites

Check this thread out, just passed through this myself.

 

 

  • Like 1
Link to post
Share on other sites

Hi @GreatHawkeye

 

I don't think repeat is what you want here, as it will keep repeating the same animation. The reason you're seeing it log stuff out is because it's calling the eyesAnimation on every repeat, but it's being called with the animation as the target. "{self}" is a reference to the tween, not the target.

 

This is probably what you want.

 

this.eyesAnimation = this.eyesAnimation.bind(this);
this.eyesAnimation()

eyesAnimation() {
  
  let rotation = Math.floor(Math.random()*2) == 1 ? 12 : -12
  let speed = Math.floor(Math.random() * 2 ) + .5

  TweenMax.to(this.eyes, speed, {
    rotationZ: rotation,
    delay: 3,
    onComplete: this.eyesAnimation
  })
}

 

  • Like 6
Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

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 ! :)

Link to post
Share on other sites

You can add the target as the onCompleteParams.

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

 

  • Like 5
Link to post
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.

×