Jump to content
Search Community

Get random numbers on each onComplete/onRepeat iteration

GreatHawkeye 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

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 comment
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 comment
Share on other sites

  • 2 weeks later...

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