Dynamic Update value on TweenlineMax

[_Greg _]

HI,

i don't understand how can i dynamic update values  on tween:
 

Example in attach.

 

Code:

$(function () {
  var tween = new TimelineMax({paused: true}),
      box = $('.box'),
      leftBtn = $('.btn-left'),
      rightBtn = $('.btn-right'),
      direction = '-',
      distance = 500,
      value1= direction + '=' + distance;

  function directionMove(playk) {
    if (playk == 'playk') {
      direction = '-';
      value1 = direction + '=' + distance;    // how to update value
      tween.play();
    }
    else if (playk == 'reversk') {
      direction = '+';
      value1 = direction + '=' + distance;  //how to update value
      tween.play();
    }
  }

  tween
    .to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default

  leftBtn.on({
    click: function () {
      directionMove('playk');
    }
  });
  rightBtn.on({
    click: function () {
      directionMove('reversk');
    }
  })
});

I want update value1 dynamic (on this example: onClick).

I can find solution, can you help me,

Thanks!

See the Pen oYXPoX by Nekiy2 (@Nekiy2) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

There are a few things incorrect in your code:

 

You create tween as a TimelineMax. A TimelineMax is only necessary when you want to sequence multiple animations.

tween should just be TweenLite or TweenMax tween. Regardless, once you create an animation like

var myCustomValue = 400;
var tween = TweenMax.to(obj, 1, {x:myCustomValue});

The tween records the x value that you are tweening to. It doesn't repeatedly check to see if you change the value of myCustomValue. 

In other words when you do

value1 = direction + '=' + distance;

the tween has no idea that value1 changed.

 

I think the best and easiest thing to do in this case is just create a new tween that moves the object to the new value every time you click the button:

 

 

function directionMove(playk) {
    if (playk == 'playk') {
      direction = '-';
      value1 = direction + '=' + distance;    // how to update value
      tween = TweenMax.to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default
    }
    else if (playk == 'reversk') {
      direction = '+';
      value1 = direction + '=' + distance;  //how to update value
      tween = TweenMax.to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default
    }
  }

 

 

http://codepen.io/GreenSock/pen/GNJPzv?editors=1010

[_Greg _]

Thanks, it very helpful, but i understand, that with TweenLite/TweenMax i can't use play(), pause(), reverse() commands?
How can i control playback?
I find on Docs: Special Properties and Callbacks:
onUpdate and onUpdateParams 
Can i use this callback functions to Update value1

value1 = direction + '=' + distance;

I update Codepen and try clarified the issue: 

1. we move from left to right from 0 to left: '-=' distance
2. Then we want to reverse (press .btn-right) and animation must move from $this (were is box now) to 0, then change direction to left: '+=' distance, then all tween.play() commands working with this ('+=') direction

3. now all move from 0 to left : '+=' distance

4. When we press btn-left distance again change to '-='

 

Thanks for your answer!

[_Greg _]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

 

There are a few things incorrect in your code:

 

You create tween as a TimelineMax. A TimelineMax is only necessary when you want to sequence multiple animations.

tween should just be TweenLite or TweenMax tween. Regardless, once you create an animation like

var myCustomValue = 400;
var tween = TweenMax.to(obj, 1, {x:myCustomValue});

The tween records the x value that you are tweening to. It doesn't repeatedly check to see if you change the value of myCustomValue. 

In other words when you do

value1 = direction + '=' + distance;

the tween has no idea that value1 changed.

 

I think the best and easiest thing to do in this case is just create a new tween that moves the object to the new value every time you click the button:

 

 

function directionMove(playk) {
    if (playk == 'playk') {
      direction = '-';
      value1 = direction + '=' + distance;    // how to update value
      tween = TweenMax.to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default
    }
    else if (playk == 'reversk') {
      direction = '+';
      value1 = direction + '=' + distance;  //how to update value
      tween = TweenMax.to(box, 15, {css: {x: value1}, ease: Linear.easeNone}); // no need move by default
    }
  }

 

 

See the Pen GNJPzv?editors=1010 by GreenSock (@GreenSock) on CodePen

I update Codepen and try clarified the issue: 

 

1. we move from left to right from 0 to left: '-=' distance

2. Then we want to reverse (press .btn-right) and animation must move from $this (were is box now) to 0, then change direction to left: '+=' distance, then all tween.play() commands working with this ('+=') direction

3. now all move from 0 to left : '+=' distance

4. When we press btn-left distance again change to '-='

 

Thanks for your answer!

[Carl]

Sorry, I'm having a very difficult time understanding what needs to happen.

 

What happens if the user hits the left button multiple times? Does the object keep moving more and more to the left (increasing the value)?

If not, I don't understand why you are using relative values.

 

What is supposed to happen when the object reaches the end left value? It appears in your demo that it repeats (jumps to 0 and goes back to the left).

 

 

Hopefully by answering these questions I will better understand what the end goal is.

[_Greg _]

Sorry, I'm having a very difficult time understanding what needs to happen.

 

What happens if the user hits the left button multiple times? Does the object keep moving more and more to the left (increasing the value)?

If not, I don't understand why you are using relative values.

 

What is supposed to happen when the object reaches the end left value? It appears in your demo that it repeats (jumps to 0 and goes back to the left).

 

 

Hopefully by answering these questions I will better understand what the end goal is.

 

 

Thank you Carl,

I find answer in this forum!

What i get with your help http://test.rezniklawyers.com/whoweare.html (carousel, with mouse move and press)

I use your answer on other topic (http://greensock.com/forums/topic/7907-reversing-timeline-animation-and-repeating-it-infinitely/?p=30278):

 

var tween = new TimelineMax({
                    onComplete: complete,
                    onCompleteParams: ['{self}'],
                    onReverseComplete: reversethis,
                    onReverseCompleteParams: ['{self}']
 });

Then control by:

 

tween.progress(some_variable_witch_calculate)

But have some trouble with CPU usage when carousel moving  , and now working with mobile adaptive to 'pan'/'swipe' events