saulgoodman

I got to this post by searching about Browserify with GSAP. killroy, for the long names, i believe you can solve it by using alias. if you're using grunt-browserify, here's a link https://github.com/jmreidy/grunt-browserify#alias But as for exposing other modules other than TweenMax, I am having the same problem. Currently, doing var TweenMax = require('./libs/gsap/minified/TweenMax.min'); works and I am able to use TweenMax. However, what if I want to use TimelineLite or TweenLite that's also included in the TweenMax file? Thanks for your help!

Thank you jamiejefferson, your second solution inspired me to come up with the following changes http://codepen.io/cocotard/pen/yGvHI 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!

Jack, 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: http://codepen.io/cocotard/pen/mjfiB 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!

+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, 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

Thank you so much for taking the time to write me the solution, Carl! The solution seems to be pretty good, as long as i always keep a reference to the original scaleOffset value. I will try it out in my project. Thank you again!

Hi all, Another very specific problem just looking for ideas, after being stuck on it for over a week. I am using the TransformationAroundCenter plugin for all of my transformations, namely rotation and scaling. I also know that you can rotate and scale at the same time, as long as you issue them all in the same command. However, i would like to know if there's a way to do these transformations separately? For example, rotate an object with duration of 10 seconds, and after 1 second after the rotation starts, start scaling. Right now, this doesn't seem to be possible. I looked into the source code of TransformationAroundCenter and TransformationAroundPoint plugins, it seems they operate on transformation matrices, which would explain why those separate transformations would conflict with each other. Could there be any way around this (for example, implement a transformationAroundCenter plugin myself that does not involve transformation matrices?), or is this problem inherently insolvable? Thank you

Hi all, I have a very specific situation, where the display objects have an original scaling factor NOT equal to 1 (for example, 0.5, or 0.3333). I am trying to achieve the effect of relative scaling on it. I am aware of the syntax of "+=" and "-=" for relative values. However, since this is scaling we are talking about, it might be a little different. Let me explain. For example, i want to scale the object by a factor of 4, that means i would like the object's dimensions to x4. So if the object is originally 50x50, it will be 200x200. Problem is, if the original scale factor is not 1, and instead is something, say, 0.5, then scale to 4 will in fact increase the object's dimension by 8 times, hence making it 400x400. In a more straightforward example, if i scale it to 1, the object will effectively scale up twice its current dimension to 100x100, where as logically, scaling by 1 should have no effect. i have thought of maybe using "*=", since we're dealing with factors and multiplications. but it doesn't seem to be a valid syntax, and it would also suffer problems when i'm trying to shrink the image back down to its original size. So i guess my question is, is it possible to scale relatively in my situation? Thank you for your help!

Ghost V, you could try to write your own plugin. Read the source code of how the original blurFilterPlugin was written, and make a few changes (mainly change from flash filter to starling's FragmentFilter). I had to work with starling as well, and the implementation of such filter plugins weren't so hard (only took less than an hour) thanks to GreenSock's excellent documentation and good coding structure

A big thanks to both rhernando and jamiejefferson! rhernando, i was thinking along the same lines, however i was hoping to use the internal mechanisms of the timeline to deal with this, and jamie's solution's working quite well for me so far. Thank you again! i'll mark this post as solved now.

Hi all, So I have a main timeline, in which there will be delayed callbacks to functions that dynamically create and add timelines to the main timeline. Everything works as intended if played normally. However, when I jump through the timeline using either seek() or progress(), things are not behaving as i would like them to. I created a simple codepen demo to demonstrate my issue: http://codepen.io/cocotard/pen/Lqftu You will need to open up the browser's console to see the log. Now, if played normally, following output is obtained: main timeline started index.html:37 added Child 1 index.html:67 timeline 1 started index.html:52 callback 1 from child1 index.html:45 callback 2 from child1 index.html:45 added Child 2 index.html:77 timeline 2 started index.html:55 callback 1 from child2 index.html:45 callback 2 from child2 index.html:45 main timeline completed However, if I seek to 4s, following output shows: main timeline started index.html:37 added Child 1 index.html:67 added Child 2 index.html:77 main duration: 5 index.html:84 main progress: 0.8 index.html:85 c1 progress: 0 index.html:86 c2 progress: 0 What i expected (and would like to have), instead, is something like this: main timeline started index.html:37 added Child 1 timeline 1 started callback 1 from child1 callback 2 from child1 added Child 2 index.html:77 main duration: 5 index.html:84 main progress: 0.8 index.html:85 c1 progress: 1 index.html:86 c2 progress: 0.5 Notice how child timeline c1 should have been completed and c2 is halfway to completion. I have read other posts about one of the solutions was to make the function return a timeline instead of adding it to the main timeline. However this would not be possible in my case. In my real code, i am obliged to use .addCallBack() on my main timeline because there will be parameters needed to be passed - and the values of those parameters will have to be JIT. I hope I made myself clear. Please do not hesitate to ask for clarifications. Thank you for your help in advance!