Jump to content
Search Community

Dynamic Property Tweening

Ross test
Moderator Tag

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

I am wondering if there is a way to tween essentially the same way as you would using the DynamicPropsPlugin in As3.


something like this from your documentation but in javascript.

TweenLite.to(myDiv, 3, {dynamicProps:{x:getMouseX, y:getMouseY}});


Secondly would it then be possible (without using a function like above) to reference a dynamic value of another element. I would want the Tween to update if "anotherdiv.width" changed during the course of the animation. Maybe the only solution is using whatever answer there is for my first question?


TweenLite.to(div, 1.5, {width:anotherdiv.width});





  • Like 2
Link to comment
Share on other sites

Give us a little time to get back to you on this one, Ross. There are some tricky things involved here actually that are much more difficult in JS than in AS, particularly when dealing with CSS values, suffixes, parsing and applying various types of data for various properties, etc. In ActionScript, property values are virtually always numbers but in JS things are far more complex. Stand by...

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
  • 4 months later...

Sorry, we don't have any updates on DynamicPropsPlugin for JS at this time. Still focused on enhancing the existing features and creating some new ones that have a higher demand. 


To stay on top of the latest features and improvements, sign up for our email newsletter which is available to all users with a GreenSock Account (free).

Or sign up via the download screen (click getGSAP button in left nav).


We also announce new features regularly via twitter and facebook

Link to comment
Share on other sites

  • 2 months later...
  • 5 months later...

This is how I did it for now, maybe it will help someone.

  tl = new TimelineLite

    onStart: =>
      // Amazing revelations about l and t
      tl.to "#element3", 0.4, { left: l, top: t, overwrite: true }, 0

  tl.to "#element1", 0.4, { width: w1, height: h1 }, 0
  tl.to "#element2", 0.4, { width: w2, height: h2 }, 0

It's in coffeescript I hope you don't mind. But basically it will calculate what it's doing at the second it starts.


Everything goes crazy for me if I scrub in reverse.

Link to comment
Share on other sites

Would you mind creating a simple codepen or jsfiddle that demonstrates the "going crazy in reverse" thing in as simple a manner as possible? 


I definitely wouldn't recommend creating a zero-duration timeline and then using an onStart to populate it, though, because onStart gets triggered when the virtual playhead moves from 0 to something greater than zero (otherwise it hasn't really "started"), but that'll never happen for a zero-duration timeline because the playhead can't move from 0. Maybe that's not what you're doing, though - I just figured I'd mention it.


A codepen will be super helpful. 


And please make sure you're using the latest version of GSAP. 

Link to comment
Share on other sites

It isn't zero duration it just starts at position zero, but that seems to work ok. The going crazy I was seeing was a lot more to do with what I had inside of "// Amazing revelations about l and t". So that's now fixed.


Still things don't do what I want here. I might be able to figure it out if I had access to a onReverseStart property.


Or, in my specific circumstance. Using a string "-=1000" with a min/max would also work, I think. So that for instance the parameter value could not drop below 0 or go above 50. Specifically what I'm doing is I have a viewable area, with a [image] inside it. The viewable area can get as big as x/y maximum and resizes with the image. The image gets twice as big. The image should scroll during all this resizing so that it's centred on a point.


I can get everything in there in advance, except the initial scroll position. I need the initial scroll position in order to calculate where that point will be.


Honestly I've just started working on this today so I may come up with a solution later on, but Dynamic Property Tweening as described by the OP sounds like it would be perfect.

Link to comment
Share on other sites

Hm, I'm having a little trouble visualizing exactly what you're after (which is why a simple codepen example would be so helpful). Typically when I hear about this type of thing, the solution isn't about someone altering the GSAP API or adding features - it's about approaching the problem a different way. Not that you're doing anything wrong - I'm just saying that there have been many times when folks will make things WAY more complex than they need to and they want all sorts of whiz-bang calculations automatically done in GSAP when instead they could alter their approach a bit and get a much better, more intuitive solution. 


I have yet to see a good use case where onReverseStart is necessary or truly useful because typically when you reverse() something, you can just put your onReverseStart code right there (before or after your call reverse()). We really try to keep the API from becoming too bloated, so if something can be accomplished relatively easily with the existing tool set, we typically don't shove extra features/code into the engine to accommodate an edge case. Our goal is to make it super flexible and robust while delivering incredibly optimized performance. 


Feel free to post a simple codepen or jsfiddle that demonstrates a concept if you'd like more help. 

  • Like 1
Link to comment
Share on other sites

  • 10 months later...
  • 1 month later...

+1, it'd be a very useful feature! Is there currently any decent workaround for being able to update the target value dynamically (besides creating a new tween that overrides the old one)? 


Basically what i am trying to achieve here is to move something sequentially. For example, i want to be able to move object O from A->B, then B->C. The relative distance values are pre-calculated as distance(A, B) and distance (A, C). So putting them into a timeline, what I am seeing is A->B, and then the object teleports back to A, and starts A->C. It would be nice if i could calculate distance(A, C) only when the tween starts, instead of pre-calculated with original position.


Thank you guys for the great work :)

Link to comment
Share on other sites

saulgoodman, I'm a bit confused here about that "teleporting" behavior you described. Would you mind creating a super-simple codepen demo so that we can see it? It should be very easy to create sequenced animation like you described. I wonder if you're using fromTo() tweens instead of to() tweens or something. My guess is that you really don't need this "dynamic" updating of tweens - that's pretty rare indeed, in all the years I've been doing this animation stuff. Typically it's just a logic/architecture issue that you can address in your code (but I could be wrong here). That codepen demo would be very useful. 

  • Like 2
Link to comment
Share on other sites



Thank you for the reply. You're right, I suspect my needs could indeed be taken care of by change of logic/architecture. I made a simple CodePen to demonstrate what I am trying to achieve: 

See the Pen mjfiB by cocotard (@cocotard) on CodePen


Now I understand why this behavior is not working as intended, as the tweens were generated immediately with the starting values as they're added to the TimeLine. My question is, how could I achieve a 'lazy calculation' such that the starting values of the properties are only calculated at the start of the tween?


Thank you! 

Link to comment
Share on other sites

Since you're calculating absolute positions from the red box's start point, changing to absolute positions works in this case. Change:

vars.x = '+=' + dx(target, destination);

vars.x = dx(target, destination);

If you'd prefer to calculate the distance at the start of each tween then you need to delay any calls to dx() until the red box is in the right position. .call() would help here e.g.

tl.call(moveX, ['#redBox', '#phO', 1], null, 0)
  .call(moveX, ['#redBox', '#phA', 1], null, 1)
  .call(moveX, ['#redBox', '#phB', 1], null, 2)
  • Like 2
Link to comment
Share on other sites

Thank you jamiejefferson, your second solution inspired me to come up with the following changes 

See the Pen yGvHI%C2%A0 by cocotard (@cocotard) on CodePen

As you can see, I again have wrapped the GSAP calls inside functions. The whole point I am trying to achieve is to embed all the GSAP mechanisms inside functions to make scripting animations easy for non-programmers. The current solution has one downside though, it does not work too well with timeline playhead being dragged around. I'll try to poke around a little more to see if I could fix that.


Thank you again! 

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.
  • Create New...