Pass Variable Parameter for Play/Reverse

[Waterpile]

This is for a mega full screen menu, clicking a fixed hamburger at the top that animates a div that takes up the entire screen (and no more) when you click on the hamburger. I'm also not allowing the user to scroll when this menu is open.

 

Looking to pass the offset of the window when playing and then redefine the offset variable after reversing and playing again. Having some trouble. Because of some other variables in the example, this is more or less how it needs to be structured to allow for some other timelines to run, I've just simplified it for the example. So while it may look a bit more complicated for the example, not each part is made specifically for the example.

 

See the Pen OYweWw by waterpile (@waterpile) on CodePen

[GreenSock]

If I understand your question correctly, you can't really do something like that because the first time a tween renders, it records the starting/ending values so that it can very quickly interpolate them on-the-fly during the animation (a very important performance optimization). So you can't just change a variable that was then set as a property on a vars object and expect everything to adjust. You could, however, just re-create that tween whenever you need that value updated. In other words, don't just hard-code a single instance and then keep trying to update it. Instead, re-create the tween/timeline when appropriate. 

 

Or you could update the vars object of the tween and invalidate() it so that it's forced to re-record the starting/ending values on the next render. 

 

Does that help? 

[Waterpile]

Re-creating the timeline each time it is clicked worked perfectly for me. Thank you for that!