Referencing a tween correctly

[bromel]

Good Afternoon,

 

I am trying to be able to control a tween within a function that i have created.

 

I am not sure weather what I am doing is possible within the scope or whether I am using the correct call back function

 

My goal is to simply to reverse the direction of a tween when the call back is made, but I am unable to make reference to it within my function. 

 

 

Any Help would be most appreciated.

 

regards

 

Bromel

See the Pen ZYNgXW by w9914420 (@w9914420) on CodePen

[bromel]

Hello everyone,

 

It always seems to be the case u get the answer after a long walk in the park

 

it looks like i did not reference my tween correctly:

 // this does not work(we mention the tween but don't reference it)

 if (status == 'denied') {
    
   myNorm.restart();
    
    console.log('should have restarted the tween?');
    
    
}



// lets reference it 

if (status == 'denied') {
    
   this.myNorm.restart();
    
    console.log('should have restarted the tween?');
    
    
}

this seems to have the affect, but I wonder what your thoughts are on this?

 

again too much tnxs guys

 

regards

 

bromel

[Carl]

that will fix it but the main problem is that the statusUpdate() method expects 2 arguments : status and myNorm.

function statusUpdate(status, myNorm)

When you call statusUpdate() from within createStatus(), you are NOT passing in the myNorm argument

 

function createStatus(status) {

  source = status; 

  detectStatus(source);

  statusUpdate(source);

}

 

 

Not entirely sure how everything is supposed to work, but keep in mind that with the timeline's onUpdate and onUpdate params below:

 

var myNorm = new TimelineMax({paused: true});
             myNorm.to(".normal", 9, {
               x:250,
               onUpdate:statusUpdate,
               onUpdateParams:[status, '{self}'],
             
              // onComplete:rev,
              // onCompleteParams:['{self}']
               });

onUpdateParams are recorded when the timeline is created, the status that you pass to updateStatus will always be the same as it was from the beginning.

Pressing on your buttons or updating the value of status in other code is not going to change the value of status that is passed from the timeline.

 

From what I understand of your code, I'm not entirely sure you need that onUpdate at all, but I might not be seeing the entire picture.

 

[bromel]

Hello Carl,

 

Many thanks for this, i must have been playing around with the pen after I had submitted it. Im just going have a look into this further and get back to you on this.

 

many thanks

 

bromel

[OSUblake]

Not sure what you are trying to do... maybe something like this? Like clicking one of the buttons to start a tween?

 

See the Pen NPZNep by osublake (@osublake) on CodePen

[bromel]

Good evening all,

 

Many thanks for taking a look at this for me, especially when you guys are extremely busy.

 

I have updated the code and added a new pen which can be found here.

 

See the Pen gbNwRd by w9914420 (@w9914420) on CodePen

 

I have managed to get it working with the logic that I need to be functional. its not the most elegant code but it will do the job, although I question if it could be written better.

 

what is important to note is that if the user clicks either of the main buttons (denied, cancel, allowed) whilst the start tween is onscreen or completed then i want my other tweens to do their job.

 

If on start any of these buttons are pressed, then the user will only see a special-tween for the denied function.

 

The final goal will to be disable the buttons after the first choice has been made, so as not to confuse the user.

 

 @OSUblake many thanks for the code, i like how you written it, I did not know u could feed vars, with assigned tweens in such a fashion.

 

Please feel free to comment, im not a coder just someone who likes GSAP

 

regards

 

bromel