richardCANE

Dear Supporters! After a couple of days of development, I have finally arrived to 2 main conclusions regarding which techniques should I use. I am still learning the Tween/Timeline/Lite/Max frameworks, but my current project will be done with: 1.: As these frameworks are highly optimized, even 50-125 tweens at once did not chew significant resources from the test machines, so most of the time I will stick with TweenLite.to(...). 2.: In other, less often cases I will mix TweenLite.to(...) with the suggested CSSRulePlugin and for "fixed tweens" (basically motions without prop changing during tweens) TimelineLite will be used. Thank all of you for those quick, helpful and desvriptive answers! I will donate to GSAP after my current project.

Hi Jamie! Thank you for the CodePen efforts! I am seriously considering on using the CSSRulePlugin as you showed me. I will try out Carl's solutions and yours too. I will get back here with my experiences soon.

Hey Carl! Thanks for the CodePen examples! I did not know, that I can use "{timelineMaxInstance}.tweenTo(...)", nor that "method" to switch the "progress" between 0 and 1 along with the "ease" too correspondingly. THAT IS A GREAT FEATURE, AMAZING CAPABILITY! My jaw dropped on this feature of TimelineMax. I will definitely try it and get back with the results.

Hey Rodrigo! Thanks for the CodePen! One of my first thoughts on this issue during my previous days whas just one TimelineLite and play back-and-forth, basically something like: //... in the onEvent function // ..... if( !active ) { timeline.play(0, true); // play from 0th and surpress events } else { timeline.reverse(); // play reversely } // ..... ...and this would really work most *.easeInOut and for linear/none easing functions. However, for the sake of swiftness, I try to tween UI, but also provide fast and usable interface. Therefore, I use Expo.easeOut easing function for both the "active" and the "inactive" timelines. Even with using .easeOut for both timelines, it would be pretty straightforward to implement this in a back-and-forth manner (basically create the "active", then mirror it to get the .easeOut easing effect for the "inactive" section of the timeline). If I will not be able to solve this issue, I would have to do this way. But when I want to introduce the 3rd state as I wrote, it would be quite long to implement and for larger scales, it is unfeasible. If this is not possible with TimelineLite, do you know guys some method to group the TweenLite instances together with only one instantiations and after that juts use them? Something like this: // instantiate them once var tweens = new TweenLite( [object1, duration, {...props for 1...}], [object2, duration, {...different props for 2...}], [object3, duration, {...diff props for 3...}], [object4, duration, {...diff again props for 4...}], [object5, duration, {...different props for 5...}], ); // ...then later... tweens.to(); // somehow call them at once efficiently // ...then later again tweens.to(); // call them AGAIN at once efficiently // ...and then later again tweens.to(); // call them AGAIN MORE at once efficiently Are there any methods/ways to doing this? ...I was thinking also to somehow "dynamicProp" the tweening props (maybe using TweenLite/TimelineLite "onEvents"), but from performance perspective, it would be similar to reinstantiation of the tweens, so this is not a feasible way either. Any additional suggestions/advices would be quite helpful, even just mere thoughts/notices. Thank you guys again, thank you in advance!

Hey Jonathan! Thank you for your response! The "Example 1" - http://codepen.io/jonathan/pen/xcFHu you forked does not work, when you click rapidly (please try out yourself - click rapidly for 10-20 times, the tweens "die"). As for the "Example 2" - if you read what I wrote, what is my situation with the lots of tweens, I deliberately do not want to instantiate 40-50-60 TweenLite instances on every state changes (so fundamentally on every "onClick" events) again and again in functions. The TweenLite and TimelineLite (and the "Max"-es) are insanely great tools, when tweens are need to be done. Some, one or more proper solutions should exist for this kind of problem as I am probably not the first one, who needs tons of tweens and tries to basically group them and play back-and-forth the grouped tweens to reach visual pleasentness yet with nice performance. I showed you what I tried within the "activate" and "deactivate" functions, my CodePen link is just the barebone minimal, when someone had this problem before. Thanks again!

My current project (JavaScript/GSAP) needs lots of tweening on different elements at the same time (it will be a heavily tweened/animated site). In "lots of" I mean 50-75 "TweenLite.to"s per click event, in total about 150-300 css properties to tween. It would be used all over the site on elements (buttons, menus, forms). Most of the elements will have 2 states, an "active" and an "inactive" state, basically when the user clicks on a menu, the menu will be activate, click again/elsewhere and goes to inactive. To efficiently manage the tweens, I would like to use TimelineLite, create all the tweens after the site loads and store them in 2 TimelineLite instances avoiding the "TweenLite.to"s again and again on each event/state change. - the "activateTimeline" and "inactiveTimeline" look like like this: var activeTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens with "new TweenLite(...)"s... ] }); var inactiveTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens again with "new TweenLite(...)"... ] }); This works really well. But there is a serious problem. When the user clicks rapidly or programatically change states BEFORE the finish ("onComplete") of the ongoing timeline, jumps and slowdowns will occur. This is not the case, when using "TweenLite.to"s on every event over and over again as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected. I have tried to use some conditions to somehow kill/invalidate the ongoing "old" timeline the let the "new" timeline on state change finish nicely as I would expect, also when starting over the timeline again: function activate() { if( !active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); // sometimes, on very rapid clicking/programatical state changes, mostly the headerTimelineActive.progress() will give a NaN if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( inactiveProgress > 0 && inactiveProgress < 1 ) { headerTimelineInactive.kill(); } if( activeProgress > 0 ) { headerTimelineActive.pause(0, true); } headerTimelineActive.play(); active = !active; } }; function deactivate() { if( active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( activeProgress > 0 && activeProgress < 1 ) { headerTimelineActive.kill(); } if( inactiveProgress > 0 ) { headerTimelineInactive.pause(0, true); } headerTimelineInactive.play(); active = !active; } }; ...but these methods did not help. Again, on rapid clicking/programatically state changes/click before the actual timeline "onComplete"s jumping, jittering and some sort of race/concurrent conditions occur. Here is a small CodePen demo. Please, give me some advice on what should I do/how should I do to use 2 "TimelineLite"s as I described and on state changes, somehow stop the "old" timeline and let the "new" timeline go. I wolud like to get the same effects/tweening experiences, when using just "TweenLite.to"s again and again (as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected), but with 2 "TimelineLite"s. If I can get this to work with 2 timelines, there will be menus, when a 3rd state will be introduced, a "disabled" state with a 3rd TimelineLite. But currently, I am not able to do, what I wolud like to do with 2 timelines as I described. Thank you in advance, thank you all!

hi all! i have a flash ( Flash CS4 - AS3 ) site with a loader.swf that loads 20 components ( 01.swf -> 20.swf ) . each component uses TweenMax with tweenings and functions and i know that TM is small ( and of course F***** Awesome ), but when i import into each of the components the final filesizes ( .swf ) will be increased with 200-300 kbytes ( 20 x 10/15 kB ). is there a way to compile the TM alone to a swf file ( example: tweenmax.swf ) and the loader loads the tweenmax.swf first, before the other components and the components can use TM without import and compile to each component swfs just refer to the TM at runtime ( like an element of the Runtime Shared Library ) ? thanks any replies and suggestions.