Jump to content
GreenSock

_Greg _

Dynamic Update value on TweenlineMax

Go to solution Solved by _Greg _,

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

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!

post-46121-0-06193800-1478613420_thumb.png

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

See the Pen oYXPoX by Nekiy2 (@Nekiy2) on 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!

Link to comment
Share on other sites

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

See the Pen oYXPoX by Nekiy2 (@Nekiy2) on 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!

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • Solution

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  

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