GreatHawkeye

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 !

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

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!