Dynamic update of Tween vars

[Abhilash L R]

Hi,

 

I have a responsive HTML5 page which has specific areas which will zoom in locate a particular tween animation. Is there a way by which I can update the tween vars object [left, top] dynamically on run time?

 

Thanks

Abhilash

[Rodrigo]

Hi Abhilash,

 

You can use the updateTo() method to accomplish that. Keep in mind that this is a method that can be applied to TweenMax instances only.

 

That method allows you to alter the final values of the animated properties during the tween execution, giving you also the possibility to restart the tween or keep playing it.

var t = TweenMax(element, 2, {top:300, left:300});

// on an event handler or at any point in your code
// in this case the true boolean indicates that the tween will be restarted
t.updateTo({top:500, left:500}, true);

// in this case the tween won't be restarted
t.updateTo({top:500, left:500}, false);

API reference:

http://api.greensock.com/js/com/greensock/TweenMax.html#updateTo()

 

Rodrigo.

[GreenSock]

Note: the TweenMax.updateTo() method doesn't work with plugins (only "standard" values), so I'm not sure it'll deliver what you're after here (css properties use CSSPlugin).

 

Is there any reason why you wouldn't just create a new tween each time you need to make an update? The engine automatically handles overwriting for you and it's highly optimized for speed. 

[Abhilash L R]

Hey!

 

Thanks for an immediate response!

 

The reason why it has been put inside a TimelineMax is that I have a series of animations taking place like scenes. Each scene is written as a TimelineLite and started inside the TimelineMax object. 

 

Basically the animation is like a parallax scroll where there are pointers which has tooltip. Each pointer will be displayed after the background is zoomed in, and moved to the pointer's position, once the pointer's location is acheived, the tooltip pops out showing some information. From there on the next pointer is shown on screen while the bg div moves left/right. This process continues till all the pointers are shown with their respective tooltips. Imagine it's something like a facebook wall timeline animation.

 

I hope I was clear in defining the animation to you guys.

 

Now the point is, I want to make it responsive and define my markers on the run. That is, the pointers will be dependant on the screen width/height and also the date parameter which will actually vary for different users. 

 

Which do you guys suggest is the best way to animate such responsive design?

 

Thanks in advance

[Rodrigo]

Hi Abhilash,

 

In that scenario the best recommendation is work with percentages and as Jack pointed either create all the tweens again (if necessary), you can achieve this by creating the tweens/timelines in a function, and call the function that creates the tweens/timlines on resize.

 

You might find this post useful:

 

http://forums.greensock.com/topic/9063-best-approach-for-conditionally-disabling-tweens/

 

Also is always better to see a reduced live sample, please also check this post:

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.